为什么在横向模式下的 iPad 上无法拾取以下媒体查询?
@media all and (min-device-width: 1000px) {
css here
}
Or
@media all and (min-width: 1000px) {
css here
}
我希望这个 css 能够针对任何宽度为 1000px 或以上的浏览器,而不仅仅是 ipad。因此,如果可能的话,我宁愿使用第二个选项 min-width 而不是 min-device-width 。两个版本都可以在我的电脑上使用 Firefox 正常运行。
谢谢
iPad 总是报告其宽度为 768px,高度为 1024px,因此您必须了解它是如何旋转的orientation
并使用min-device-height:1000px
像这样:
/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}
/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
@media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}
Results:
- iPad
- 肖像 -green text - black背景
- 景观 -white文本 -red背景
- iPhone
- 肖像 -green text - black背景
- 景观 -green text - black背景
- Computer (resolution)
- 1680x1050 -white文本 -red背景
- 800x600 -green text - black背景
使用 chrome 和 firefox(还有人使用 IE 吗?)
参考:
w3媒体查询 http://www.w3.org/TR/css3-mediaqueries/#orientation
Safari CSS 参考 http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html#//apple_ref/doc/uid/TP40002050
优化网页内容 http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW2
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)