Nexus 7 screen.width返回800，但媒體查詢max-width：720px仍然適用

Question

我有一台谷歌Nexus 7平板電腦用於測試一些響應式設計。 在Javascript中， screen.width返回800px，如預期的那樣（原始分辨率）。

當屏幕的最大寬度> 720px時，平板電腦如何選擇以下媒體查詢？

@media only screen and (max-width: 720px) and (orientation: portrait) {
    .test{ background: red;}
}

Answer 1

Android確實針對密度擴展，以適應Android生態系統不同的屏幕密度。 默認情況下，Android瀏覽器以中等屏幕密度為目標，嘗試模擬元素的大小，就像屏幕是MDPI屏幕一樣。

使用此網站 ，您可以看到此縮放的結果是Nexus 7上的device-width為601 px ， device-height為880 px 。因此，它屬於您的max-width: 720px聲明，背景顯示為紅色。

window.screen.width和.height始終返回實際的屏幕大小。 你必須記住， 視口大小和屏幕大小完全是兩個不同的東西。

如果您不想要此行為，可以將target-densitydpi=device-dpi到<meta name="viewport">標記。 這將禁用Android目標密度縮放： device-width和device-height將報告device-height本機屏幕分辨率。

有關Android目標密度擴展的更多信息，請參閱Android開發人員文檔 。