針對高分辨率密度像素設備的媒體查詢

Question

我們正在嘗試專門針對Samsung Galaxy Nexus。它的分辨率爲1280 x 720，像素密度爲2，因此可以像顯示桌面設備一樣顯示頁面。

我們試圖

@media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) and (portrait) {};

和

@media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) {};

以及其他各種組合。我們似乎無法專門針對此設備，而不會影響桌面，平板電腦或其他電話佈局。

任何幫助，將不勝感激。

Answer 1

你的媒體查詢是不正確的：

@media only screen 
and (min-device-width : 720px) 
and (-webkit-min-device-pixel-ratio : 2) 
and (orientation : portrait) { /* styles */ }; 

@media only screen 
and (min-device-width : 720px) 
and (-webkit-min-device-pixel-ratio : 2) { /* styles */ }; 

不知道你試圖用第二個目標是什麼。您可能需要考慮添加以下媒體查詢：

@media only screen 
and (min-device-width : 1280px) 
and (-webkit-min-device-pixel-ratio : 2) 
and (orientation : landscape) { /* styles */ }; 

試試看。