CSS媒体查询只针对iPad和iPad?

嗨,我正在与多个平板设备,iPad,银河标签,macros碁Iconia,LG 3D垫等。

  • iPad – 1024 x 768
  • LG垫 – 1280 x 768
  • Galaxy Tab – 1280 x 800

我只想使用CSS3媒体查询来定位iPad。 因为,LG和iPad的设备宽度是相同的768px – 我无法分离每个设备。

我试过以下分开,但似乎没有工作:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ @media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */ 

我不知道-webkit-device-pixel-ratio和其他-webkit *选项及其值为iPad的目标。 我不想使用JavaScript的风格,任何想法?

最后find了一个解决scheme: 使用CSS检测不同的设备平台

 <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" /> 

为了减lessHTTP调用,这也可以用在你现有的普通CSS文件中:

 @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .ipad-portrait { color: red; } /* your css rules for ipad portrait */ } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ } 

希望这可以帮助。

其他参考:

我有点迟了回答,但以上都没有为我工作。

这是为我工作

 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { //your styles here } 

那么完全相同的问题,还有一个答案=)

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

 @media only screen and (device-width: 768px) ... @media only screen and (max-device-width: 1024px) ... 

我目前无法testing,所以请testing=)

还发现了一些:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

或者你用一些javascript检查导航器,并用javascript生成/添加一个CSS文件

您需要通过其用户代理使用某个脚本来定位设备。 iPad的用户代理是:

 Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 
 <html> <head> <title>orientation and device detection in css3</title> <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" /> <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" /> <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" /> <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" /> <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" /> <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" /> </head> <body> <div id="iphonelandscape">iphone landscape</div> <div id="iphoneportrait">iphone portrait</div> <div id="ipadlandscape">ipad landscape</div> <div id="ipadportrait">ipad portrait</div> <div id="htcdesirelandscape">htc desire landscape</div> <div id="htcdesireportrait">htc desire portrait</div> <div id="desktop">desktop</div> <script type="text/javascript"> function res() { document.write(screen.width + ', ' + screen.height); } res(); </script> </body> </html>