1. 程式人生 > >Webapp中1px邊框在retina屏中變粗的問題

Webapp中1px邊框在retina屏中變粗的問題

最近在做一個webapp, 給邊框設定了1px的大小, 結果同時在1080P的手機中開啟並截圖後用PS無限放大, 發現邊框並不是1px大小, 而是變成了3px的大小. 其實這是因為手機的dpr在作祟, 在超高清屏(dpr=3)的情況下會用3dp的大小去渲染1px的內容, 因此1px的邊框在超高清手機上會被拉伸成3px, 這個問題是需要解決的.

還好,時代總是進步的。也許很多人都不知道, 現在IOS8下,已經支援0.5px了。。 那麼意味著,在devicePixelRatio = 2下,我們可以使用如下的css程式碼:


但是在ios7以下,android等其他系統裡,0.5px會被顯示為0px,即該解決方案需要寫hack相容老舊系統。

三種方案:

1、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')
	}
}

2、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); } // This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() { })

相比於第一種方法,這種方法的可靠性更高一些,但是需要把js放在body標籤內,相對來說會有一些重繪,個人建議是用第一種方法。

3、服務端做ios版本判斷,輸出相應的類名

相比於JS的實現,個人更傾向於在服務端完成,這樣前端也少幾行程式碼,並且更加可靠。

如在wormhole裡的實現(wormhole是nodejs環境下的一個服務端渲染模版的容器)

{{#if($plugins.detector.os.name === "ios" && $plugins.detector.os.version >= 8)}}
    {{set (hairlines = "hairlines")}}
{{/if}}
<html class="{{hairlines}}">

加上類名後,就可以針對該類名寫相應的css了。比如:

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

也許你會問,那ios7以下和其他android機下怎麼搞?我的建議是:還是維持老樣,不去處理,隨著時間的推移,我相信最終都會支援0.5 和 0.3 px邊框的。

如果硬要相容,怎麼整?方案也有很多,稍微介紹下:

1、通過viewport + REM的方式來相容。

目前這種相容方案相對比較完美,適合新專案(老專案改用REM單位成本會比較高)。 淘寶M首頁 就是這種方案。

在devicePixelRatio = 2 時,輸出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 時,輸出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

同時通過設定對應viewport的rem基準值,這種方式就可以像以前一樣輕鬆愉快的寫1px了。關於REM佈局,可以參考下我上一篇文章 《移動端H5頁面之iphone6的適配》

其他方案(該部分內容來源於妙淨同學的分享):

2、 transform: scale(0.5)

本次專案中我就是使用這種方法去解決的, 而且個人認為這種方式比較成熟

實現方式

height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;

優點

圓角無法實現,hack程式碼多,實現4條邊框比較鬧心

缺點

只能單獨使用,如果巢狀,scale的作用也會對包含的元素產生,不想要的影響,所以此種方案配合:after和:before獨立使用較多,比如畫一個商品的邊框四條線,容器的after和before可以畫2條線,利用容器的父元素的after、before再畫2條線。

.after-scale{
	position: relative;
}
.after-scale:after{
	content:"";
	position: absolute;
	bottom:0px;
	left:0px;
	right:0px;
	border-bottom:1px solid #c8c7cc;
	-webkit-transform:scaleY(.5);
	-webkit-transform-origin:0 0;
}

3、 box-shadow

實現方式

利用css 對陰影處理的方式實現0.5px的效果

底部一條線

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

優點基本所有場景都能滿足,包含圓角的button,單條,多條線,

缺點

顏色不好處理, 黑色 rgba(0,0,0,1) 最濃的情況了。有陰影出現,不好用。

參考連結

4、 background-image

實現方式

設定1px通過css 實現的image,50%有顏色,50%透明

.border {
	background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
	linear-gradient(270deg, red, red 50%, transparent 50%),
	linear-gradient(0deg, red, red 50%, transparent 50%),
	linear-gradient(90deg, red, red 50%, transparent 50%);
	background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
	background-repeat: no-repeat;
	background-position: top, right top,  bottom, left top;
	padding: 10px;
    }

優點

配合background-image,background-size,background-position 可以實現單條,多條邊框。邊框的顏色隨意設定

缺點

如果有圓角的效果,很sorry 圓角的地方沒有線框的顏色。都要寫的程式碼也不少

參考連結

5、 用圖片

實現方式

.border-image{
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}

優點

缺點

也可以通過修改圖片來達到圓角的效果,但是由於圖片的原因,壓縮過後的圖片邊緣變模糊了(不放大的情況下不明顯),需要引用圖片或者base64,邊框顏色修改起來不方便。

轉載自

原文地址: http://www.tuicool.com/articles/ZRv6bun