关于移动端1px

关于viewport

    指的就是可视化区域，移动端的的Viewport概念比较复杂。有 LayoutViewport 和 VisualViewport。LayoutViewport是浏览器虚拟的一个视窗用来兼容显示桌面网站。苹果开始以一个扩展的方式引入了这个概念，手机上的safari默认宽为980px，后来其他浏览器也引入了此概念，只不过viewport宽度有些不同。

不同浏览器默认宽度

1px变粗的原因

为啥1px在移动端看起来比实际的要粗很多，这是因为移动端对于‘px’这个单位的含义不一样。移动端html的header总会有一句，<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />，这句话定义了本页面的viewport的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域,，这个区域是可能比屏幕大的。因为 viewport的设置和屏幕物理分辨率是按比例而不是相同的。 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例，在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

移动端1px细线解决方案

    1、图片

        使用一张6*6的图片，分成9宫格等分填充border-image, 这样元素的4个边框宽度都只有1px

@media screen and (-webkit-min-device-pixel-ratio: 2){

        .border{border: 1px solid transparent;  border-image: url(border.png) 2 repeat;    }

}

@media screen and (-webkit-min-device-pixel-ratio: 3){        

        .border{border: 1px solid transparent;  border-image: url(border.png) 3 repeat;    }

}

缺点: 对于圆角样式，将图片放大修改成圆角也能满足需求，但这样无形中增加了border的宽度，存在多种边框颜色更改的时候比较麻烦

    2、用小数来写px值

        IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样

.border { border: 1px solid #999 }

@media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 }}

@media screen and (-webkit-min-device-pixel-ratio: 3) {.border { border: 0.333333px solid #999 }}

缺点: 安卓与低版本IOS不适用

3、background渐变

背景渐变, 渐变在透明色和边框色中间分割,

@media screen and (-webkit-min-device-pixel-ratio: 2){

    .border{

        background-position: left top;

        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));

    }}

缺点: 代码量大，而且需要针对不同边框结构， 而且这只是背景，这样做出来的边框实际是在原本的border空间内部的，如果元素背景色有变化的样式，边框线也会消失。最后不能适应圆角样式

4、:before, :after与transform

构建1个伪元素，将它的长宽放大到2倍，边框宽度设置为1px，再以transform缩放到50%.

.radius-border{position: relative;}

@media screen and (-webkit-min-device-pixel-ratio: 2){

    .radius-border:before{

        content: "";pointer-events: none; /* 防止点击触发 */box-sizing: border-box;

        position: absolute;width: 200%;height: 200%;left: 0;top: 0;

        border-radius: 8px;border:1px solid #999; -webkit-transform(scale(0.5));

        -webkit-transform-origin: 0 0; transform(scale(0.5));transform-origin: 0 0;

    }}

缺点: 代码量也很大, 占据了伪元素, 容易引起冲突

5、flexible.js

把viewport宽度设置为实际的设备物理宽度。flexble.js静态资源文件

px和rem相互转换的计算方法会暴露在window.lib.flexible中. 这样可以为less/sass编写宏方法，淘宝移动端就是采用这样flexible方案。

缺点：不适用安卓, flexible内部做了检测 非iOS机型还是采用传统的scale=1.0, 原因在于安卓手机不一定有devicePixelRatio属性, 就算有也不一定能响应scale小于1的viewport缩放设置, 例如我的手机设置了scale=0.33333333, 显示的结果也与scale=1无异.

参考链接：移动端1px

作者：超爱吃小龙虾
链接：https://www.jianshu.com/p/4daf01b11c16