智能手机竖屏、横屏和桌面电脑的媒体查询？

Question

智能手机竖屏、横屏和桌面电脑的媒体查询？

16

我正在尝试为智能手机横竖屏设置不同的媒体查询，我想要针对纵向和横向进行定位。我已经了解到其他的Stack链接，如：

但是我仍然有问题，我的横向查询无法正常工作，这是我正在使用的代码：

Desktop css first
   -- css for desk --

Portrait:

   @media only screen 
     and (min-device-width: 320px) 
     and (max-device-width: 479px) {

}

Landscape:

   @media only screen 
     and (min-device-width: 480px) 
     and (max-device-width: 640px) {

}

景观代码好像根本没有被考虑。

- rob.m

2个回答

9

与其处理宽度，处理高度更好，因为宽度的尺寸幅度较大，而575.98像素对于移动设备来说至少是一个涵盖了很多设备的范围。

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
//enter code here
}

- Luis Alves

最终这是对我有效的解决方案。视口的高度是我试图解决的真正问题。 - Matt Kaye

如果你的目标是横屏，那么现在的宽度是横屏的宽度吗？还是仍然是竖屏的宽度？ - Agent Zebra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

尝试添加

orientation : landscape

@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: landscape) {

//enter code here
}

参考this site或this snippet。