分清像素和像素比与认识 1px 的问题

像数

为影像显示的基本单位。 https://www.wikiwand.com/zh-sg/%E5%83%8F%E7%B4%A0

CSS像素(CSS pixels)

浏览器使用的抽象单位，用来精确度量网页上的内容。 eg：平时经常写的width:100px;height:100px; 都是与设备无关的。

设备独立像素 (device - independent-pixels)

也可以称为设备无关的逻辑像素

meta里面设置width=device-width，这个device-width就是设备独立像素。

在chrome里看到的375*667 320*480等等都是设备独立像素，它们在数值上与css数值是相等的

设备像素(device pixels )

也称为物理像素，是显示屏的最小物理单位，每一像素都包含自己的颜色、亮度。像素是没有大小的、是一个抽象概念、是一个相对单位。

Device Pixel Ratio，设备像素比。

window.devicePixelRatio。一般情况下： DPR = DP / DIP

以我手上的 pro6 为例：
window.devicePixelRatio // 3
screen.width, screen.height // 320 640

官网分辨率: 1920 x 1080

关于像素

有一个常见的错误理解：认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。分辨率：泛指量测或显示系统对细节的分辨能力。以PC屏幕，手机屏幕为例，分辨率1920*1080 是指屏幕纵向能显示1920个像素，横向能显示1080个像素描述分辨率的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（像素每英寸）。从技术角度说，“像素”只存在于电脑、手机显示领域，而“点”只出现于打印或印刷领域。

ppi（ pixel per inch）

显示器的每英寸像素值，首先要确定屏幕的尺寸和分辨率。

以尺寸为4.7英寸、分辨率为1334*750的iphone6为例

逻辑像素(dp,pt)

为了抹去高密度分辨率屏幕(高清屏)所带来的适配问题,iOS与Android两个平台分别提出了pt（point）与dp(device-independent pixel)两个单位。他们的名称不一样，但是内涵是一样的。

视网膜屏

视网膜（Retina）屏幕是乔布斯的一个营销术语。

Viewport

layout viewport 和 visual viewport。

Layout viewport - 渲染视图，渲染页面所需要的尺寸
Visual viewport - 视觉视图，浏览器可视区域尺寸

CSS 的多种单位

https://github.com/simaQ/cssfun/issues/1
https://www.w3.org/Style/Examples/007/units.zh_CN.html

参考

https://www.paintcodeapp.com/news/iphone-6-screens-demystified
https://www.zhihu.com/question/32011095
http://screensiz.es/

0.5px 的问题

首先自己确实对移动端不熟啊，很多东西都没有认真研究过。那么下面说下 0.5px 的问题吧，网上文章太多，质量良莠不齐。其实 0.5px 这个问题准确来说是讲得 1px 的问题。

在熟悉了上面说的设备像素和设备独立像素后来理解这个 1px 的问题就迎刃而解了。那么这个问题到底说的是什么呢？

乔布斯提出了视网膜屏这个概念，其实算是个营销术语吧。其实对于 ppi 高于 300 的屏幕都可以说成是视网膜屏。就目前大多数手机而言， ppi 都很高， DPR 都是 >2 的。那么就变成了多个物理像素来显示一个逻辑像素。这就是大家说的 1px 变成了 2px 的问题。其实这里有个错误，应该是 1像素成了 2像素，因为这个指的是物理像素。而逻辑像素上 1px 就是 1px ，并没有变大。

那么我们现在需要 1个物理像素的border，并且需要考虑圆角。

rem + viewport

// 美团为例： http://i.meituan.com/
// 正常情况：

html {
    font-size: 50px;
}

// 高 DPR： 

html {
    font-size: 100px;
}

baidu google 都是 initial-scale=1 , 即使是大网站，都有不同的设置和理解。

这个方法，也是目前我觉得最好的，没有明显的兼容性问题，完全不用考虑圆角等，而使用其他 hack 手段。

Box-shadow

效果还不错






.example--box-shadow {
  box-shadow: 0 0.5px 0 #000;
}

.example--box-shadow-2 {
  box-shadow: 0 0.1px 0 #000;
}

.example--box-shadow-round {
  width: 200px;
  height: 100px;
  margin-left: 100px;
  border-radius: 10px;
  box-shadow: 0 0 0 0.5px #000;
}

iOS8 +

JS判断UA，是否是ios8+，是的话则输出类名hairlines，为了防止重绘，这段代码加在head里即可。

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = parseInt(v[1], 10);
    if(version >= 8){
        document.documentElement.classList.add('hairlines')
    }
}

是否支持0.5px边框

JS判断是否支持0.5px边框，是的话，则输出类名hairlines。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}

div {
  border: 1px solid #bbb;
}
 
.hairlines div {
  border-width: 0.5px;
}

radio 的媒体查询

这个用于图片等一些处理还不错，毕竟 0.5 不是谁都有的（2333）

.css{
    background-image: url(img_1x.png); // 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 
    border: 1px;
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{
    background-image: url(img_2x.png); // 高清显示屏(设备像素比例大于等于1.5)使用2倍图 
    border: 0.5px;
  }
}

其余

这几个方法效果比较差，就不多说了。

transform: scale(0.5)
linear-gradient(to bottom, #000 0%, #000 51%, transparent 51%)
图片

参考：

CSS retina hairline, the easy way.
再谈mobile web retina 下 1px 边框解决方案
iOS 8 中开始支持 0.5px 的渲染，该如何向下兼容？
codepen 几种实现的演示
各种方案比较与实现
viewport

分清像素和像素比 与 认识 1px 的问题

像数