Question

您好我的目标是我的应用程序的各种平板电脑屏幕。目标设备

Samsung Tab 1,2,3 - 7英寸
Samsung Tab 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 x 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 x 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中，它没有使用任何这些媒体查询。

如果有人遇到类似的问题，请发帖给我。提前谢谢。

Answer 1

您必须使用视口才能使媒体查询起作用。标准元视口如下：

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

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

1 个答案: