我可以使用最大設備寬度和設備寬度而不使用設備像素比率嗎？

Question

我有一個移動網站，可以測試任何現代設備。我視meta標籤是：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> 

問題： 能否在視值繼電器（尤其是width=device-width）和寫有出device-pixel-ratio值媒體查詢。

代碼示例： 我有一個塊有不同的佈局，而屏幕寬度較小400px。 我可以用這樣的視media query像這樣（1）使用方法：

@media all and (max-width: 399px) { 
    /* some css code */ 
} 

或像這樣（2）：

@media all and (max-device-width: 399px) { 
    /* some css code */ 
} 

或者我必須結合或有很大一部分每個媒體查詢的值（3）：

only screen and (-webkit-min-device-pixel-ratio: 2)  and (max-width: 399px), 
only screen and ( min--moz-device-pixel-ratio: 2)  and (max-width: 399px), 
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 399px), 
only screen and (  min-device-pixel-ratio: 2)  and (max-width: 399px), 
only screen and (    min-resolution: 192dpi) and (max-width: 399px), 
only screen and (    min-resolution: 2dppx) and (max-width: 399px) { 
    /*some css code*/ 
} 

而第二個問題： 在我心中字符串width=device-width必須防止css像素和設備像素之間的差異。上次陳述是錯誤的嗎？

Answer 1

簡短回答：

• 您可以只使用max-width或max-device-width查詢孤單。你已經用meta標籤處理了其餘的問題。
• 你的第二個問題不太對：它並不涉及設備像素。 width=device-width只是告訴設備使用其默認虛擬像素（CSS像素）的測量。
• 另一個注意事項：複雜媒體查詢的最後一個例子將只針對高分辨率設備，這可能不是你想要的這個例子。

說明：

我要去參考CSS像素爲虛擬像素，但我認爲我們在談論同樣的事情。

虛擬像素測量是瀏覽器所說的像素寬度。它直接與CSS像素相關，但可能與設備像素不同。例如，如果我有一臺帶有標準分辨率顯示器的舊iPhone，其虛擬像素寬度爲320.（這佔用了320個CSS像素）。此顯示器的寬度上也有320個實際像素，或320個設備像素，因此device-pixel-ratio （虛擬像素與設備像素的比例）爲1.

如果我升級到具有高分辨率顯示器的較新iPhone，它仍會註冊320個虛擬像素，但現在它的device-pixel-ratio爲2或640實際像素寬度。這就是爲什麼一切看起來如此清晰 - 相同空間中有更多的像素。

如果我在其中任一設備上查看網站，寬度看起來相同，因爲它們具有相同的虛擬像素度量。到我的CSS，他們都是320像素寬。這很簡單，直到一些移動瀏覽器允許我們捏和縮放來調整網頁大小。 此大小調整將更改虛擬像素寬度。

某些移動瀏覽器實際上會自動調整大小。因此，如果我要訪問手機瀏覽器上固定寬度爲1000px的網站，我的手機瀏覽器可能會嘗試在可見視窗中調整網站的整個寬度，這會使我的虛擬像素數量達到1000，而不是320我會查看該網站的一個非常非常小的版本。這對於響應式網站來說是個問題，因爲如果我的手機說它有1000個虛擬像素，它會激活我的1000px媒體查詢，而不是正確的320px查詢。

width=device-width和initial-scale=1禁用此自動調整大小，因此您知道，如果瀏覽器的本機虛擬寬度爲320，那麼您將在初始加載時獲得該值。

minimum-scale=1, maximum-scale=1, user-scalable=no禁用用戶捏手和縮放的能力。這對某些用戶來說可能很煩人，但它可以讓您更好地控制最終的觀看體驗。

device-pixel-ratio用於測量設備的分辨率。它通常用於向高分辨率設備提供高分辨率圖像，因爲普通分辨率圖像在高分辨率設備上看起來很模糊。通常人們測試以確定device-pixel-ratio是等於還是高於1.5或2以確定高分辨率設備。