一种解决方案——适配所有手机网页

做过手机网页的都知道，在一些高要求的手机网页上解决Iphone5、6、6p的屏幕适配问题费了一番功夫，但是有我时间还是不满意，在各种设备上的显示还是有细微的差距。尝试了很多方法，也参考了别人加的思路。有的用js，有的用mediaquery，有的用一些比较新的单位rm，rem等等……我觉得还是很难的。麻烦，难道就没有一行代码就能解决问题的方案吗？经过各种尝试，我终于得到了它。我在这个阶段还没有发现任何错误。如果您有任何问题，请告诉我！我相信这段代码是必要的在移动端，大家都知道width=device-width的大致意思：让width=devicescaling后面的宽度分别是320、360、375、414等等。initial-scale=1：初始缩放比例为1，这个属性类似于transform:scale(1)；在CSS中。minimum-scale=1：最小缩放比例，相当于设置div的mix-height，有限制。maximum-scale=1：最大缩放比例，同上，不多说了。user-scalable=no：是否允许用户使用两根手指缩放，（默认不允许）。看完之后我想到width=device-width，难道不能设置一个固定值吗？width=320，经过我的测试，发现是可以的。哈哈哈！完美解决方案，经过我长期的实验，这里有一个坑，就是不能在width=fixedwidth之后写initial-scale=1，（写完之后在部分浏览器中会失效，所以推荐不要写它）。最后附上1px超细边框线教程。大部分前端设计图的宽度应该是640或者720，当我们写border:1px的时候，其实物理上和2px差不多。在这种情况下，它几乎无法应付直线。变换：scaleY（0.5）；这样看起来清洗了很多，但是做成圆角按钮还是不够的，而且大量使用transform的代码也不是很美观。这时候，我们可以这样做：你没看错，是640，和设计图的尺寸一模一样.每次很大的值都不需要除以2，有时候一个25除以2，还纠结是写12还是13？这样写的网页在手机上运行的效果看起来会细腻很多。