移動端視網膜（Retina）屏幕下如何解決網頁中1px顯示問題？

蘋果發布iPhone6（375x667，devicePixelRatio：2）、iPhone6 plus（414x736，devicePixelRatio：3）等Android機型解析度如何處理兼容最優。

- 手機淘寶的flexible設計與實現

- A tale of two viewports

- REMs And Viewport Measurements

- Configuring the Viewport

- CSS Media Queries for iPads iPhones

---

可以用1px尺寸的帶背景色元素然後scaleX(0.5)或scaleY(0.5)實現0.5px效果。

比如要實現一個元素的下邊框1px效果：

.item {
position: relative;
}
.item:after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: #c8c7cc;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}


demo：http://jsbin.com/tijiro/1/

來源：Framework7 （可以參考一下它在各種終端適配上的處理，有些蠻有意思的）

---

手機答題，待會再補詳細的。

有幾種方案，一種是用圖片：2像素，一個透明的，一個目標顏色，可結合border-image與base64玩。

另外一種不同於@張雲龍的scale原理，採用目標元素的整體縮小一半，再加上原大小的寫法。

還有是通過控制viewport縮小為0.5來實現全局的原大小

還有一些忘了。。

---

實現的方式有很多種:

• background-image (border-image)
• scale(0.5)
• box-shadow

寫了一篇文章 Retina 屏幕下的 1px 邊框 | XINRAN LIU 介紹了每一種實現方式的代碼(CSS 和 Stylus), 優缺點等, 還有一些原理的介紹, 可以參考一下哦~

---

其實這個大屏滿地走，retina不如狗的時代，可以直接適配devicepixelratio，具體實現可以參考餓了么和天貓首頁，淘寶首頁等等，不僅1px問題解決了，你會發現安卓的某些文字不對齊，chrome 360瀏覽器不支持12px以下字體（是的手機端瀏覽器），各種問題都解決了

---

一，border-width:.5px

二， linear-gradient

---

推薦閱讀：