視網膜設備是否需要自己的媒體查詢？

我有幾個媒體查詢在視網膜設備上被忽略 - 例如，iPhone 6 Plus。 iPhone 6 Plus的屏幕最小設備寬度爲414px。使用以下媒體查詢，我期望手機將使customClass div具有100％的寬度。但使用這個類的div仍然是33.33333％。（我已經簡化下面的代碼，例如，清除漂浮等）視網膜設備是否需要自己的媒體查詢？

例如，我有以下的CSS：

.customClass { 
    width: 33.33333%; 
} 

@media screen and (max-width: 800px) { 
    .customClass { 
     width: 100%; 
    } 
}

我有這個在我的頭，順便說一句：

<meta name="viewport" content="width=device-width, initial-scale=1">

我認爲上面的視口meta標籤會導致設備寬度（414px）被用作寬度，所以它應該使用.customClass上的100％寬度。

它似乎像更高的像素密度導致它忽略800px寬度的查詢，但我不知道爲什麼。

經過大量閱讀和研究後，我發現如果您使用的是@ 2x圖像，則只想使用視網膜媒體查詢，例如，定位所有視網膜屏幕（而不是像我這樣的網站佈局在上面做）。所以我不認爲我需要像only screen and (min-device-pixel-ratio: 2)這樣的視網膜媒體查詢，以便爲iPhone 6 Plus提供100％的寬度。

我試圖避免設備特定的媒體查詢like this因爲有這麼多設備需要擔心，這似乎不切實際。（我也嘗試了其中的一些，他們確實在針對特定設備（如iPhone 6 Plus）工作，但我更傾向於一舉以800像素爲目標）。

因此，要快速總結它，如果我的示例代碼是正確的，對標題問題的答案是簡單的「否」，那麼在瞄準視網膜設備時是否還有其他東西缺失？可能是一個更大的網站問題？（我不是要你找到這個問題，如果是別的，我會深入挖掘......但它是一個巨大的網站;））

謝謝！

來源

2016-11-29 Kyle

您的元標記看起來不錯，而且您的CSS看起來不錯 - 您無需以任何方式修改該MQ以使其在視網膜手機或iPhone 6 Plus上工作。在移動設備模擬器上選擇該手機時，您是否可以在Chrome的開發者工具中重現此問題？我懷疑CSS還有另一個問題，調試會有幫助。 –

沒有。視網膜特定媒體查詢沒有必要。

在現代世界中，您可以使用矢量或字體圖標，可以無限縮放而不損失質量。關於照片，爲視網膜顯示添加不同的內容是毫無意義的。

上面的代碼是正確的。請記住，渲染的分辨率是實際的設備分辨率/像素密度。這意味着iphone是750x1334px，像素密度爲2（@ 2x），因此實際呈現的分辨率爲375x667像素。

來源

2016-11-29 22:39:18 scooterlord

視網膜設備是否需要自己的媒體查詢？

回答

相關問題