小程序适配之viewport

为什么要做viewport适配呢？

1、手机厂商在生产手机的时候，很大一部分的页面宽度是980px；

2、一般手机的实际视口宽度都小于980px，例如：iPhone为375px；

3、需求：需要将980px的页面显示在375px的屏幕上并且没有滚动条；

实现需求：

<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>

注：将视口宽度赋值给布局宽度，并且缩放比为1:1，就可以实现；

小程序适配之viewport相关推荐

uniapp小程序适配异形屏
uniapp小程序适配异形屏 App.vue写入底部适配横线小程序自定义顶部适配 App.vue写入 globalData: { // 适配刘海屏test: false,statusBarHeig ...
微信小程序适配iPhoneX底部小黑条
微信小程序适配 iPhone X 底部小黑条一.在 app.js 中获取到设备信息 getSystemInfo 获取设备信息,然后将底部距离保存到 globalData 中方便页面读取当然如果项目 ...
[微信小程序]适配各个不同机型屏幕
微信小程序该如何适配各个机型屏幕我们知道在原始设备中, iOS有pt,安卓有dp(密度无关像素), 但是无论在原生开发语言还是在React-native中, 我们处理屏幕适配, 都可以采用动态获取当 ...
小程序适配H5端跨域问题解决
小程序本身自带有解决跨域的方法,但是当小程序运行到浏览器的时候,由于写小程序的时候并没有处理跨域,所以H5端做相同的axios请求,小程序没有报错,H5端却会报错解决方法: 我们需要到manifes ...
uniapp苹果无法上架_uni-app开发小程序适配苹果端采坑总结
不得不说,任何一个开发者遇到苹果手机都会或多或少需要做适配,在使用uni-app开发小程序时,我就发现不少需要兼容的地方,今天做个小结 1.由于页面大多数内容都是动态获取,当页面高度不给固定值时,让其 ...
微信小程序转钉钉小程序适配问题
与阿里云项目合作,作为ISV,不能使用腾讯系产品,必须将微信小程序转成钉钉小程序. 经过12天的艰苦奋斗,基本完成.将经验教训整理一下给大家. 不支持wxs,无法自定义页面函数很方便的{{mc.to ...
微信小程序适配iPhone X
1.获取设备型号 App({// 全局数据globalData: {// 其他数据定义 ...isIPX: false, // 当前设备是否为 iPhone X},// 小程序启动入口onLaunch ...
小程序适配全面屏机型
应用场景手机适配思路分析 1:首选需要判断是否是全面屏手机 2:如果是全面屏手机,则改变响应的样式代码实现 1:在全局放一个变量.isFullSucreen,含义为是否是全面屏2:调用wx.ge ...
最新版微信小程序适配登录方案(uniapp开发)
<template><view class="content"><b ...

小程序适配之viewport

小程序适配之viewport相关推荐

最新文章

热门文章