mobile web retina 下 1px 边框解决方案
http://www.tuicool.com/articles/ZRv6bun
?
再談mobile web retina 下 1px 邊框解決方案
原文??http://www.ghugo.com/css-retina-hairline/ 主題?WebKit?iOS?CSS本文實際上想說的是ios8下 1px解決方案。 1px的邊框在devicePixelRatio = 2的retina屏下會顯示成2px，在iphone 6 plug 下，更顯示成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/GMzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch; border-width: 0px 0px 1px; }優點
無
缺點
也可以通過修改圖片來達到圓角的效果，但是由于圖片的原因，壓縮過后的圖片邊緣變模糊了（不放大的情況下不明顯），需要引用圖片或者base64，邊框顏色修改起來不方便。
參考：?http://dieulot.net/css-retina-hairline
轉載于:https://www.cnblogs.com/fang51/p/4555330.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的mobile web retina 下 1px 边框解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端学习笔记
- 下一篇： 根据网卡MAC地址查询厂商信息