html手机1px,再谈Retina下1px的解决方案

在互联网上有关于1px边框的解决方案已经有很多种了，自从使用Flexible库之后，再也没有纠结有关于1px相关的问题。由于最近在考虑新的移动端适配方案，也就是放弃Flexible库，我不得不考虑重新处理1px的方案。为此为我自己也重撸了一些1px的解决方案，整理出来，希望对有需要的同学有帮助。

Flexible方案

Flexible方案已不是什么神秘的方案了，借助JavaScript来动态修改meta标签中viewport中的initial-scale的值，然后根据dpr修改html中的font-size值，再使用rem来处理。有关于这方面的详细使用可以阅读早期整理的文章《使用Flexible实现手淘H5页面的终端适配》。

但是话说回来，这个方案目前只处理了iOS的dpr为2的情况，其他的都没有处理，也就是说不支持Android和drp=3的情况。对于追求完美的同学来说，这是无法接受的。

有问题，总是有解决方案的，有同学做过方面的详细探索。那么跟着其思路也重新撸了一回。先回到Fleible中，其实现原理，大家都知道的。让viewport放大为device-width的dpr倍数，然后缩小1/dpr倍显示。

对于viewport的计算理论上是这样的：

viewport的width没设置的话，默认是980px，这方面的详细介绍可以阅读《Configuring the Viewport》一文；但如果设置了initial-scale，viewport=device-width/scale；同时还设置了width和initial-scale，则会取min-width，即应用这两个较小的值。详细的介绍可以阅读《Preliminary meta viewport research》一文。

接下来看看各种设备下的场景。首先使用JavaScript计算出scale的值：

var scale = 1 / window.devicePixelRation;

在head中的meta标签设备：

iPhone5的viewport的width=640px，得到的meta值：

符合我们预期所需的结果。

iPhone6 Plus也是完美的：

再来看几个Android的设备。比如米3，它的dpr=3，viewport的width=1080，得到的值也是我们期待的：

在米2中，它的dpr=2，viewport的width=720，效果也是OK的。

看到这里时，大家可能都会觉得完美，无需纠结啥，事实上在米2和米3中，看到的都是设置默认的浏览器、UC和Chrome浏览器的结果。回过头来再看WebView，那就出问题了。当Webview为360时，线依然也是粗的，这里测试，发现user-scalable=no会使