仅针对 iPad 和 iPad 的 CSS 媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8271493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS media query to target iPad and iPad only?
提问by Hossain Khan
Hi I am working with multiple tablet devices, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad and so on.
嗨，我正在使用多种平板设备、iPad、Galaxy Tab、Acer Iconia、LG 3D Pad 等。
- iPad - 1024 x 768
- LG Pad - 1280 x 768
- Galaxy Tab - 1280 x 800
- iPad - 1024 x 768
- LG 垫 - 1280 x 768
- Galaxy Tab - 1280 x 800
I want to target iPad only using CSS3 media query. Since, device width of LG and iPad is same 768px - I am having trouble separating each device.
我只想使用 CSS3 媒体查询来定位 iPad。因为，LG 和 iPad 的设备宽度是相同的 768 像素 - 我无法分离每个设备。
I have tried following to separate, but does not seem to be working:
我试过以下分开，但似乎没有工作：
@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 */
I don't know the -webkit-device-pixel-ratio and other -webkit* options and their values to target for iPad. I don't want to use JavaScript for styles, any ideas?
我不知道 -webkit-device-pixel-ratio 和其他 -webkit* 选项及其针对 iPad 的值。我不想将 JavaScript 用于样式，有什么想法吗？
回答by Hossain Khan
Finally found a solution from : Detect different device platforms using CSS
终于找到了一个解决方案：使用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" />
To reduce HTTP call, this can also be used inside you existing common CSS file:
为了减少 HTTP 调用，这也可以在您现有的公共 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: 1024px) and (device-height: 768px) and (orientation:landscape) {
.ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}
Hope this helps.
希望这可以帮助。
Other references:
其他参考：
回答by Baig
I am a bit late to answer this but none of the above worked for me.
我回答这个问题有点晚了，但以上都不适合我。
This is what worked for me
这对我有用
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
//your styles here
}
回答by Beatriz Oliveira
You need to target the device by its User Agent, using some script. The user agent for the iPad is:
您需要使用一些脚本通过其用户代理定位设备。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
回答by Daniel Ruf
Well quite same question and there is also an answer =)
嗯，完全相同的问题，还有一个答案 =)
http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1
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) ...
I can not test it currently so please test it =)
我目前无法测试，所以请测试一下 =)
Also found some more:
还发现了更多：
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
Or you check the navigator with some javascript and generate / add a css file with javascript
或者您使用一些 javascript 检查导航器并使用 javascript 生成/添加一个 css 文件
回答by Daniel Raja Singh
<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>
回答by kevinius
These days you can use a Media Queries Level 4feature to check if the device has the ability to 'hover' over elements.
如今，您可以使用媒体查询级别 4功能来检查设备是否能够“悬停”在元素上。
@media (hover: hover) { ... }
Since the ipad has no 'hover' state you can effectively target touch devices like the ipad.
由于 ipad 没有“悬停”状态，您可以有效地针对 ipad 等触摸设备。
