起因
- 設計師給出設計稿上明明是1px的邊框在移動端retina屏上顯示很粗(2倍屏上顯示爲2px,3倍屏上顯示爲3px)
- 設備像素比
注意
- 安卓不支持小於1的像素,所以通過設置border-width=0.5px不適用安卓
解決
通過高度爲1px的div,再通過scaleY縮小可以實現(不能做圓角,而且做4條邊很麻煩,排除)
.border-line { height: 1px; -webkit-transform: scale(.5); transform: scaleY(.5); background: blue; overflow: hidden; }
通過僞元素寬、高放大後,再通過scale縮小可以實現(可以做圓角,代碼量過大,可以配合scss減少代碼量,但是在3倍屏下縮放後寬度不太精確,比如縮放0.33會顯小,縮放0.333會顯長,排除)
@media (-webkit-min-device-pixel-ratio: 1) { .border-line:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid blue; } } @media (-webkit-min-device-pixel-ratio: 2) { .border-line:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid blue; -webkit-transform: scale(.5); transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } } @media (-webkit-min-device-pixel-ratio: 3) { .border-line:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 300%; height: 300%; border: 1px solid blue; -webkit-transform: scale(.333); transform: scale(.333); -webkit-transform-origin: 0 0; transform-origin: 0 0; } }
-
- 方案1
- 如果不在head裏寫
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- flexible.js會自動在head裏創建一個meta標籤,具體的縮放比根據Retina屏幕設備像素比而不同,可能爲1、0.5或0.3333333333333333,如下圖:
- 這樣能解決手機端1px問題,但是帶來了一個新問題,就是你的項目用到的所有插件都要能適應這種規範。舉個例子,你項目中用到了layer.js,那就gg了,因爲這個插件顯示的彈層尺寸在Retina屏幕上面會被相應的縮小
- 如果不在head裏寫
- 方案2
- 如果在head裏寫
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- flexible.js就不會自動創建meta標籤了,縮放比固定爲1
- 這樣無法解決1px邊框問題,但也是基於rem的一套手機端適配方案
- 如果在head裏寫
方案3
- 方案2提供了基於rem的手機端適配方案,在此基礎上我們只要解決Retina屏幕1px問題就行了
理解ios可以識別小於1的像素,而安卓不能,因此我們放棄對安卓端的1px問題的解決,只考慮ios端
/* ios端2倍屏下寬度設爲.5px */ @media (-webkit-min-device-pixel-ratio: 2) { .ios .g-border { border-width: .5px !important; } } /* ios端3倍屏下寬度設爲.4px */ @media (-webkit-min-device-pixel-ratio: 3) { .ios .g-border { border-width: .4px !important; } }
- 方案1
效果
ios(可以看到ios可以識別小於1的像素)
安卓(可以看到安卓無法識別小於1的像素)