平板電腦屏幕媒體查詢多個屏幕因素

嗨我針對我的各種平板電腦屏幕的應用程序。目標設備是平板電腦屏幕媒體查詢多個屏幕因素

三星標籤1，2，3 - 7英寸
三星標籤4 - 7和10英寸
的Nexus 7 2012
的Nexus 7 2013和以後

使用下面的媒體查詢。

/* LANDSCAPE: 
Apple iPad 
Apple iPad 2 
Apple iPad 3 (and 4) 
Apple iPad Mini 
Archos 80G9 
BAUHN AMID-972XS 
HP Touchpad 
Panasonic Toughpad A1 
Acer Iconia Tab A101 
Archos 70b (it2) 
Arnova 10b G3 
BlackBerry PlayBook 
Samsung Galaxy Tab 2 7.0 
Samsung Galaxy Tab 7 
Ainol Novo 7 Elf 2*/ 

@media screen and (min-width:1024px) and (max-width:1024px) and 
(device-width:1024px) (orientation : landscape) and 
(-webkit-min-device-pixel-ratio:1) { 

}

/*的Nexus 7 2012 / / 1280×800像素（216 PPI）*/

@media screen and (min-device-width:602px) and (orientation : 
landscape) and (-webkit-min-device-pixel-ratio:1.331) and 
(-webkit-max-device-pixel-ratio:1.332) { }

/*的Nexus 7 2013 1920×1200個像素（323 PPI）*/

@media screen 
and (min-device-width: 602px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2) 
and (device-aspect-ratio: 40/23){ }

/*媒體查詢爲三星Galaxy Tab 4 10寸*/

@media screen and (min-width:1280px) and (device-width:1280px) and 
(max-width:1280px) and (orientation:landscape) and 
(-webkit-min-device-pixel-ratio:1) and (device-aspect-ratio:8/5) { }

併爲整個應用程序有一些通用的CSS。我的Nexus 7 2012，三星10和三星Galaxy 1,2,3工作正常。但是，Nexus 7 2013的媒體查詢沒有任何影響。在nexus 2013中，它沒有使用任何這些媒體查詢。

請張貼我，如果有人遇到類似的問題。提前致謝。

來源

2014-09-05 Ragu

我給你的問題是，你爲什麼要專門針對而非更流暢的響應性的Web應用程序，這將可以跨設備使用某些設備，是CSS爲每個設備完全不同？ – 2014-09-05 16:00:18

您必須使用視口才能使媒體查詢正常工作。一個標準的中繼檢視會是這樣：

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

來源

2014-09-05 14:53:40 mehulmpt

平板電腦屏幕媒體查詢多個屏幕因素

回答

相關問題