英特网校

一个方案 - 适配所有移动端网页

做过移动端网页的都知道,在一些高要求的移动网页上解决Iphone5、6、6p,的屏幕适配问题上花了不少功夫,但有时候还是不尽满意,各种设备上显示还有稍微有一点差距的。

我曾今也尝试了很多办法,也参考了别人加的思路,有的用js,有的用媒体查询,有的用一些比较新的单位rm、rem等等...... 我觉得还是很麻烦,难道就没有一个可以一行代码解决问题的方案吗?经过我各种的尝试之后终于有了,目前阶段还没发现bug,如果有问题,还请不吝赐教!


相信这一段代码是在移动端上必须的一段,大概的意思大家也都知道

  • width=device-width:让宽度=设备缩放之后的宽度,就是320、360、375、414这些。

  • initial-scale=1:初始化的缩放比例1,这个属性和css中transform: scale(1);有异曲同工之妙。

  • minimum-scale=1:最小缩放比例,相当于你给div设置mix-height一样,带有限制。

  • maximum-scale=1:最大缩放比例,同上,不说了。

  • user-scalable=no:是否允许用户使用双指进行缩放,(默认不允许)。

看了这些,我就想 width=device-width 我就不能设置一个固定值吗?width=320, 经过我的测试,发现是可以的。


哈哈! 完美解决,经过我长期的实验,这里有一个坑,就是 width=固定宽度 之后是不能 写 initial-scale=1 的,(写了之后在有些浏览器中不行,所以建议不写)。

最后附一个1px极细边框线的教程。大多数的前端的设计图应该都是640或者720的宽度,当我们写border:1px的时候,实际上是物理相似2px,这种情况平时做直线的时候勉强可以应付,transform: scaleY(0.5);这样看起来就洗了很多,但是做圆角的按钮的时候就力不从心了,而且大量使用transform 的代码也不是很优雅,这个时候我们可以

这样:


你没看错,就是640,和设计图的尺寸一模一样,每次大的值都不用在除以2了,有的时候 一个 25px除以2的时候就是不是还在纠结是写12px呢还是13px呢? 这样写的 网页实现在手机上运行的效果看起来会细腻很多。

看到有很多同学面对这个的一些问题,我这里更新一点,都觉得不能全部适用,我这里谢了一个demo,放在了个人网站上,有兴趣的同学可以研究下, 可以在chrome浏览器中模拟移动设备,也可以用手机打开这个网站, 建议用手机打开,毕竟chrome浏览器无法模拟手机的物理1px. demo地址 demo.yuanyuanyuan.me/vi


转载地址:https://zhuanlan.zhihu.com/p/24443208?refer=dreawer

评论中心

登录后可评论,请 登录 注册