CSS Media Query最大宽度和iPad [英] CSS Media Query max-width and ipad

问题描述

我有一套规则要应用于所有小于960px宽的屏幕.

I have a set of rules I'd like to apply to all screens smaller than 960px wide.

显而易见的是:

@media only screen and (max-width : 959px)

但是，对于纵向模式的iPad，此操作将失败.我已经读过iPad不管其方向如何，其宽度和高度都相同.

However this fails with iPad in portrait mode. I've read that iPad reports its width and height the same regardless of orientation.

是否有确保iPad(或其他使用与iPad逻辑相同的设备)尊重实际观看宽度的标准方法?

Is there a standard way of making sure the iPad (or other devices that use the same logic as the iPad) respect actual width being viewed?

显然，我宁愿避免使用特定于iPad的"规则或方向查询-该查询应适用于宽度小于960像素的任何屏幕.

Obviously I'd prefer to avoid "iPad-specific" rules, or orientation queries - the query should apply to any screen less than 960 pixels wide.

谢谢.

推荐答案

尝试改用@media only screen and (max-device-width : 1024px).那应该可以横向或纵向覆盖iPad.

Try using @media only screen and (max-device-width : 1024px) instead. That should cover an iPad in landscape or portrait.

我了解到，无论方向如何，iPad的宽度和高度都相同.

I've read that iPad reports its width and height the same regardless of orientation.

这很棘手. iPad报告相同的max-device-width而不管其方向如何.但是，它正确地遵循了不同方向/宽度的不同max-width.设备是不变的部分.

This is tricky. The iPad reports the same max-device-width regardless of orientation. However, it correctly respects different max-width at different orientations/widths. The device is the part that doesn't change.

希望这会有所帮助.

这篇关于CSS Media Query最大宽度和iPad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！