CSS媒体查询

Question

我正在尝试调整我的平板电脑网络应用程序,以便在手机上使用.媒体查询功能似乎很完美,我的初步测试证实了这一点.我的问题是:手机和平板电脑将其方向从纵向更改为横向(在设备旋转时),最大宽度是指什么？

换句话说,较大的Android手机的分辨率为480x800,iPhone4的分辨率为640x960,原装Blackberry Torch的分辨率为360x480.这些是设备以纵向模式保持时的所有分辨率(W x H),因此宽度分别为400,640和360.但是,当您将设备旋转为横向时,高度"变为"宽度以用于显示目的.因此,横向的有效宽度分别变为800,960和480,800和960宽度与平板电脑横向宽度重叠,这会使显示器变得混乱.

那么,宽度总是宽度？也就是说,当设备报告其尺寸时,宽度值对于CSS目的是否总是保持不变,或者当设备旋转到横向时宽度值是否会改变？

谢谢大家提前.

Answer 1

翻转设备时宽度值将发生变化,因为正在查看的页面宽度也在变化.

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

@media screen and (orientation: portrait) {
}

这将检查浏览器窗口的宽度是否大于高度(方向:横向将执行相反的操作).为了获得最佳结果,您可能需要使用'and'运算符组合许多MQ属性来进行链式测试.即:

@media screen and (orientation: landscape) and (max-width: 960px) {
}

此处提供了MQ属性的完整列表.