平板电脑屏幕媒体查询多个屏幕因素

问题描述：

嗨我针对我的各种平板电脑屏幕的应用程序。目标设备是平板电脑屏幕媒体查询多个屏幕因素

三星标签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中，它没有使用任何这些媒体查询。

请张贴我，如果有人遇到类似的问题。提前致谢。

我给你的问题是，你为什么要专门针对而非更流畅的响应性的Web应用程序，这将可以跨设备使用某些设备，是CSS为每个设备完全不同？ – 2014-09-05 16:00:18

答

您必须使用视口才能使媒体查询正常工作。一个标准的中继检视会是这样：

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

平板电脑屏幕媒体查询多个屏幕因素

相关推荐