一个方案-适配全部移动端网页

作过移动端网页的都知道，在一些高要求的移动网页上解决Iphone五、六、6p，的屏幕适配问题上花了很多功夫，但有时候仍是不尽满意，各类设备上显示还有稍微有一点差距的。

我曾今也尝试了不少办法，也参考了别人加的思路，有点用js，有的用媒体查询，有的用一些比较新的单位rm、rem等等...... 我以为仍是很麻烦，难道就没有一个能够一行代码觉接问题的方案吗？通过我各类的尝试以后终于有了，目前阶段还没发现bug，若是有问题，还请不吝赐教!

---

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

相信这一段代码是在移动端上必须的一段，大概的意思你们也都知道
width=device-width：让宽度=设备缩放以后的宽度，就是320、360、37五、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， 通过个人测试，发现是能够的。

---

<meta name="viewport" content="width=320,user-scalable=no" />

哈哈哈！ 完美解决，通过我长期的实验，这里有一个坑，就是 width=固定宽度 以后是不能 写 initial-scale=1 的，（写了以后在有些浏览器中不行，因此建议不写）。

---

最后附一个1px极细边框线的教程。大多数的前端的设计图应该都是640或者720的宽度，当咱们写border:1px的时候，其实是物理类似2px，这种状况平时作直线的时候勉强能够应付，transform: scaleY(0.5);这样看起来就洗了不少，可是作圆角的按钮的时候就力不从心了，并且大量使用transform 的代码也不是很美观，这个时候咱们能够
这样：

<meta name="viewport" content="width=640,user-scalable=no" />

你没看错，就是640，和设计图的尺寸如出一辙，每次大的值都不用在除以2了，有的时候 一个 25除以2的时候就是否是还在纠结是写12呢仍是13呢？ 这样写的 网页实如今手机上运行的效果看起来会细腻不少。