🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
移动端默认的视口大小是980px(css像素)`<meta name="viewport" content="width=375">`可修改默认的视口大小 默认情况下,移动端的像素比就是980/移动端宽度(如iphone6 980:750,完美视口应该是375:750) >[danger]为什么是750呢? *iPhone6*的理想*视口宽度*为375px,同时设备物理像素为750px,*iPhone6*的设备像素比为2 如果我们直接在网页中编写移动端的代码,这样在980的视口下像素比是非常不好,导致网页中的内容非常小,如iphone像素比:980:750,即1px的css像素=0.765物理像素(即在手机的一个物理像素里显示的内容更多,内容变小) 编写移动页面时必须确保有一个比较合理的像素比: 1css像素 对应2个物理像素 1css像素 对应3个物理像素 怎么搞呢,就是用meta标签修改手机的视口大小 ~~~ <--将移动端的视口大小从默认的980px改为100px--> <meta name="viewport" content="width=100"> ~~~ 然后测试下: ``` <style type="text/css"> html,body{ margin: 2px 0; padding: 2px 0; } .box1{ width:100px;height:100px;background-color: #bfa; } </style> <div class="box1"></div> ``` ![](https://img.kancloud.cn/39/35/3935b97532c54c071146c922125c8b13_359x233.png) 每一款移动设备设计时,都会有一个最佳的像素比, 一般我们只需要将像素比设置为该值即可得到一个最佳效果 将像素比设置为最佳像素比的视口大小我们称其为完美视口 iphone6将视口调成375,这样375:750=1:2 ~~~ <meta name="viewport" content="width=375"> ~~~ 375是iphone的最佳视口,其他手机的最佳视口是不一样的怎么查询手机的最佳视口? 除了之前提到的[查看手机像素的网站](https://material.io/resources/devices) 浏览器F12切换成移动端模式,也可以查看 ![](https://img.kancloud.cn/bb/8e/bb8e84b2bfb895efa828bb63b5f89723_394x73.png) 每个移动端的完美视口可能不一样,我们怎么做到兼容每个移动端都能实现完美接口?`content="width=device-width, initial-scale=1"` ```html // 兼容标签 指定双核浏览器默认以何种方式渲染页面。这里指定默认用webkit内核渲染 <meta name="renderer" content="webkit"> <!-- 适应移动端完美视口 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ``` 每个移动端的完美视口不一样,设置固定宽度如px就不行了,需要使用vw vw表示视口宽度(viewport width) 100vw就是一个视口宽度 1vw=1%视口宽度(1/100视口宽度) iphone6视口宽度750px=100vw(`<meta name="viewport" content="width=750px">`) 那么1px=0.1333333333333333vw(100/750) 设计图的宽度:750px(375的2倍) 、1125px(375的3倍,应对当前某些及以后高清晰度手机) 以750px的设计图为例:我们向要一个48px*35px的按钮,用多少vw表示? 100/750=0.1333333333333333 (100/750)*48=6.4vw (100/750)*35=4.667vw ``` .box{ width:6.4vw; height:3.667vw; } ``` 上面不好计算: 换成rem 1 rem= 根元素html的 1 font-size 将html的font-size设置为100px 那么1rem=100px; 如果将html的font-size设置为0.1333333333333333vw 那么1rem=1px=0.1333333333333333vw; 此时元素的宽高设置如下: ``` .box{ width:48rem; height:35rem; } ``` 但是,浏览器的最小font-size为12px,设置的font小与的12px,会被浏览器强制修改为12px 那么将html的font-size扩大10倍 ``` html{ font-size=1.333333333333333vw; } ``` 此时元素的宽高设置如下: ``` .box{ width:4.8rem; height:3.5rem; } ``` 查看元素明显有点大?参看下此时html的font-size还是12px 1px=0.1333333333333333vw 10px=1.333333333333333vw; 所以还不够 扩大40倍 ``` html{ font-size=5.333333333333333vw; } ``` 此时元素的宽高设置如下: ``` .box{ width:48/40rem; height:3.5/40rem; } 即 .box{ width:1.2rem; height:0.875rem; } ``` 具体参看vw解决方案