1.Flexible原理
- 1.1設(shè)置viewport
通過設(shè)置scale將viewport寬度設(shè)置為實際的設(shè)備物理寬度, css里的1px就等于實際物理設(shè)備1px欠气。
例如iphone6 設(shè)備像素比devicePixelRatio=2,flexible設(shè)置的meta信息如下：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
iphone6沒有設(shè)置scale之前(375px) x (667px),1個css像素由2 x 2個物理像素構(gòu)成钱慢，設(shè)置scale之后viewport大小為（750px） x (1334px),iphone6是二倍屏知允，從而實現(xiàn)css1px等于實際1px。1px就是設(shè)備展示的最小單位了婆排。通常ui給的1px就是物理設(shè)備的最小單位（下圖中紅色部分標(biāo)注的部分），flexible很好的實現(xiàn)了在iphone上的1px線條益眉，直接設(shè)置height: 1px即可陕壹。
image.png
- 1.2 設(shè)置rem
Flexible將屏幕寬度等分10份应狱，html元素上的font-size設(shè)置為1rem, 1rem = 屏幕寬度 / 10, 例如iphone6中1rem = 750px / 10 = 75px, css需要將px轉(zhuǎn)化為rem, 從而實現(xiàn)不同屏幕的適配共郭。
2. 安卓下1px問題
Flexible只處理了IOS機(jī)型，非iOS機(jī)型還是采用傳統(tǒng)的scale=1.0侦香，原因是在于安卓手機(jī)不一定有devicePixelRatio屬性,以及devicePixelRatio的不規(guī)范，導(dǎo)致Flexible放棄治療纽疟。所以在安卓的高清屏幕上1px顯示比較粗罐韩，例如安卓3倍屏，1px會用3行物理像素點(diǎn)展示如下圖所示污朽。比ios的1px寬了許多散吵。
image.png
解決方案：判斷若為安卓機(jī)型，給html添加樣式如下
// flexible.js
function retina () { // android高分辨率屏幕處理
if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS') !== -1) return;
var classNames = [];
var pixelRatio = window.devicePixelRatio || 1;
classNames.push('pixel-ratio-' + Math.floor(pixelRatio));
if (pixelRatio >= 2) {
classNames.push('retina');
}
var html = document.getElementsByTagName('html')[0];
classNames.forEach(function (className) {
html.classList.add(className);
});
}
...
// css文件
.border {
...
height:1px;
html.pixel-ratio-2 & {
transform: scaleY(0.5)
}
html.pixel-ratio-3 & {
transform: scaleY(0.3)
}
}
ps:在iphone下設(shè)置0.5px（小于最小的物理像素單位）依然有線條展示，在android下設(shè)置0.5px是不會展示的矾睦。
為什么小于最小的物理像素單位還會展示線條呢晦款？
其實展示的依然是最小的物理像素單位，不同的瀏覽器處理小于1px的方式不同枚冗，有些采用四舍五入缓溅，有些大于某個值展示1px否則就不展示，有些只是線條的顏色變淺了赁温，從視覺上看就變細(xì)了坛怪。對比處理效果如下圖所示。
image.png
