最小宽度媒体查询不工作在iPad上?
为什么在横向模式下在iPad上拾取以下媒体查询?最小宽度媒体查询不工作在iPad上?
@media all and (min-device-width: 1000px) {
css here
}
或者
@media all and (min-width: 1000px) {
css here
}
我想这个CSS针对任何浏览器是1000像素宽或以上,不只是台iPad。出于这个原因,id相当适用于最小宽度的第二个选项,如果可能的话不使用min-device-width。这两个版本在我的电脑上都可以正常使用firefox。 感谢
在iPad上始终报告其为768px宽,其作为1,024像素的高度,所以你必须找出它是如何与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;
}
}
结果:
- iPad的
- 肖像 - 绿色文本 - 黑色背景
- 景观 - 白色文本 - 红色背景
- iPhone
- 肖像 - 绿色文本 - 黑背景
- 景观 - 绿色文本 - 黑色背景
- 电脑(分辨率)
- 1680×1050 - 白色文本 - 红色背景
- 800x600的 - 绿色文本 - 黑色背景
使用Chrome &火狐(没有人甚至使用IE浏览器了吗?)
参考文献:
w3 media queries
Safari CSS Reference
Optimizing Web Content
从http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
它看起来像screen
属性可能是必需的。
你的代码可以在ipad上工作,但我想定位其他平板电脑以及超过100px宽的桌面浏览器。 – Evans
这听起来像添加一些JavaScript设备检测可能是一个更强大的解决方案。我喜欢modernizr与我写的附加浏览器和版本作为html类的自定义代码的组合,因此我确切知道我正在处理的是什么。我只是不相信浏览器足以做他们应该做的事情,所以我喜欢在几分钟内直接发现浏览器的具体问题并直接攻击它们,而不是试图找到需要几小时或几天的完美解决方案。 –
忘了提及我认为与JavaScript,你可以追加浏览器的宽度和高度作为自定义类,你可以添加类似.min1000Width。然后,你就可以在没有媒体查询的情况下拥有香草CSS,即使是功能最少的浏览器也能理解。 –
如果发现了这个新的iPad
@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) {
* {
color:white;
background-color:red;
}
}
为了记录在案的伟大工程,我不知道为什么
@media (min-width: 1000px) {
/* css here */
}
不适合你。自这个问题首次发布以来,iPad可能会发生什么变化?
这里有一个工作示例:
实时取景:http://fiddle.jshell.net/panchroma/Bn4ah/show/
编辑观点:http://fiddle.jshell.net/panchroma/Bn4ah/
此外,一定要包括
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在页面的头部。
我试图用一个简单的媒体查询是这样的: @media只有屏幕和(最小宽度:768px){ 这里的CSS} ,但我不会在iPad Pro的10.5' 我是测试触发我将它增加到900px(用于肖像),它工作得很好,我认为由于需要补偿的视网膜显示器,它可能在旧的iPad非视网膜上正常工作。
您的代码和链接对我无效。 – Evans
有点烦人的iPad以这种方式工作,但感谢您的答案。 – Evans
@jdln Np。我同意应该有更好的方法来完成这一点。希望未来会有更好的移动设备和平板电脑的CSS标准。 – chown