訪問硬件像素在移動設備上

Question

信息從here澄清的術語。

硬件像素：顯示器上的物理像素。例如，iPhone 5具有640個水平硬件像素的屏幕。

設備無關像素（DIP）：裝置中的像素的縮放以正常觀看距離，這應該 近似上的所有設備相同的大小相匹配的統一基準像素。 iPhone 5的寬度爲320下降 。

CSS像素：用於由視口控制的頁面佈局的單位。諸如width：100px之類的像素尺寸在CSS 像素中指定。 CSS像素與設備無關像素的比例爲 頁面的比例因子或縮放比例。

的是，有沒有辦法設置硬件像素和CSS像素像1之間的關係：1。

我的意思是如果我想將div的寬度設置爲100px，那麼即使在Retina顯示屏上它也只有100個硬件像素。

Answer 1

屏幕比例因子（視網膜，目前要麼2倍或3倍）是從頁的比例因子是不同的。在相同的頁面比例因子下，取決於（視網膜）顯示，1px將是1x1,2x2或3x3硬件像素。

這聽起來像你要做的是以「原生」分辨率驅動屏幕，這將使它看起來像它有2倍或3倍的像素，但在（非視網膜）屏幕比例1.

爲了實現這個目標，你必須乘以屏幕比例係數的大小變換的觀點，同時通過其屏幕因子的倒數進行縮放。

您可以設置頭的<meta name="viewport" content="width=device-width-times-2, initial-scale=0.5">但你的內容便少可讀性和尖銳。

如果您正在尋找這樣做的元素的基礎上，你可以設置

-webkit-transform-style: preserve-3d; 
-webkit-transform: scale3d(0.5,0.5,0.5); 

3D是必要的，作爲2D轉換可能導致問題與觸摸區域不與元素的匹配起來在視圖中的位置。

Answer 2

我認爲你可以使用device-width與min-device-width和max-device-width屬性來訪問硬件像素。 device-width - 描述輸出設備的寬度。例如：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... } 

Here你可以找到地圖上的標準設備，併爲他們的媒體查詢。

而且，可以爲DPI您可以使用這種方式min-resolution財產的媒體不同的設備設置媒體查詢：

@media print and (min-resolution: 300dpi) { ... } 

，以取代舊min-device-pixel-ratio語法使用：

@media screen and (min-resolution: 2dppx) { ... } 

這裏是source。

基本上，在清晰的CSS中，您無法訪問硬件像素。您可以將頁面優化爲不同的分辨率。

Answer 3

您可以使用：

@media screen and (max-width: 300px) { /* To Do */ } 

鏈接，請訪問：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 4

如果你想要的確切關係，我不認爲你可以在CSS中做到這一點。 但你可以做到這一點的JS：

爲了得到一個100像素寬的div的寬度：

var myDivWidth = 100/window.devicePixelRatio; 

所以在iPhone 5的2.0 pixelRatio你將有超過100的50像素寬的div蔓延物理像素。

如果您想縮小div內容，您可以使用css transform:scale(0.5)。