CSS媒体查询

扫码查看

我正在尝试使我的平板电脑网络应用适合在手机上使用。媒体查询功能似乎很完美,我的初步测试证明了这一点。我的问题是:使用手机和平板电脑将其方向从纵向更改为横向(在设备旋转时)的最大宽度是什么意思?

换句话说,较大的Android手机的分辨率大约为480x800,iPhone4的分辨率为640x960,原始的Blackberry Torch的分辨率为360x480。这些是将设备保持为纵向模式时的所有分辨率(W x H),因此宽度分别为400、640和360。但是,将设备旋转到横向时,高度“变为”宽度以用于显示。因此,横向的有效宽度分别变为800、960和480,并且800和960的宽度与平板电脑的横向宽度重叠,从而使显示困惑。

那么,宽度是否总是宽度?也就是说,当设备报告其尺寸时,宽度值是否出于CSS的目的始终保持不变,或者当设备旋转到横向时宽度值是否会发生变化?

谢谢大家。

最佳答案

翻转设备时,宽度值将更改,因为正在查看的页面的宽度也在变化。

如果要查询设备是在横向还是纵向模式下使用,则可以改用direction属性:

@media screen and (orientation: portrait) {
}

这将检查浏览器窗口的宽度是否大于高度(orientation:landscape将执行相反的操作)。为了获得最佳结果,您可能需要使用“和”运算符结合使用许多MQ属性的组合来链接测试。 IE。:
@media screen and (orientation: landscape) and (max-width: 960px) {
}

完整的MQ属性列表可通过here获得。

关于CSS媒体查询,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8956599/

10-13 01:49
查看更多