Retina手持顯示器：通過CSS可以實現1px邊框嗎？

我遇到了這個問題，我的設計概念像iPhone 4的顯示器包含1px邊框，我不知道Retina設備測量的CSS寬高比爲2x。Retina手持顯示器：通過CSS可以實現1px邊框嗎？

所以我首先花了媒體查詢的優勢max-device-width:640px（肖像）設計網頁，並開始承認不如預期，如果我設置的視口元到initial-scale=.5這隻會看。

的問題是：如果我不希望設置initial-scale=.5並且限定了iPhone的實際像素尺寸的媒體查詢，似乎沒有辦法達到Retina顯示屏上1px的寬邊框或這樣的，因爲設置border:.5px將強制iOS計算它的整數值 - 這似乎導致0而不是1。

來源

2013-09-21 Circuit Circus

雙密度屏幕並不意味着它將1像素顯示爲2.只需將邊框設置爲1px並且它將爲1px。而且你不需要設置'max-width：640px'來定位一個設備，這與iPhone的320px是一樣的。 –

你可以檢查'.5px'的值是否有效。或者例如'.33pt'。 –

@TigranPetrossian iPhone 4實際上具有兩倍的分辨率和兩倍的iPhone 3的DPI。如果您不採取措施，瀏覽器會將所有像素值乘以2，否則輸出結果會非常小！ –

這就是我在iPhone上實現1px邊框（在iPhone 5上測試）的方式。

HTML 
<span class="hr"></span> 

CSS 
.hr { 
    display: block; 
    width: 100%; 
    border-bottom: 1px solid black; 
    -webkit-transform: scaleY(0.1); 
}

顯然，這使得它非常棘手1px的邊框應用到任何東西，實際上作爲一個容器，但它會做真正的1px的分隔符的伎倆。

來源

2013-12-10 05:07:36 monners

謝謝！雖然這不是一種可靠的，跨瀏覽器/設備兼容的概念，但我很欣賞以這種方式瞭解webkit特定的CSS。我發現很多功能超出了我對樣式表邏輯的想象...... –

Retina手持顯示器：通過CSS可以實現1px邊框嗎？

回答

相關問題