CSS媒体查询最大宽度和ipad

我有一套规则我想适用于所有屏幕小于960像素宽。CSS媒体查询最大宽度和ipad

最明显的是：

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

然而，这未能与iPad处于纵向模式。我读过iPad无论方向如何都报告宽度和高度相同。

是否有标准的方法来确保iPad（或其他使用与iPad相同的逻辑的设备）尊重实际查看的宽度？

很明显，我宁愿避免使用“iPad特定”规则或方向查询 - 查询应适用于任何屏幕宽度小于960像素的屏幕。

谢谢。

来源

2013-05-02 momo

尝试使用@media only screen and (max-device-width : 1024px)代替。这应该涵盖横向或纵向的iPad。

我读过，iPad报告其宽度和高度相同，无论方向如何。

这很棘手。不管方向如何，iPad报告相同的max-device-width。但是，它正确地尊重不同方位/宽度的不同max-width。该设备是不改变的部分。

希望这会有所帮助。

来源

2013-05-02 20:51:52

感谢您的回复。我不想专门针对iPad - 我希望任何小于960的视口都可以使用提供的规则，无论设备如何。因此，如果iPad（或任何设备）的纵向显示小于960，则应遵守所提供的规则（iPad似乎没有这样做）。如果它碰巧更宽（因为风景取向，但不是以取向为依据），它不应该。目前，它看起来总是表现得好像它低于960.我不希望它在横向模式下。有任何想法吗？ – momo 2013-05-02 21:24:31

对不起，我的迟到回复。 James Holderness对视口的看法绝对是你应该做的事情，也是我完全忘记的事情。在[this]中可以找到对视口效果的一个很好的回顾（http://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard#answer-9049670）。我把一个快速的[codepen]（http://codepen.io/asimpson/pen/sJeoE）放在一起，这样你就可以看到行为并修改它以获得你想要的结果。基本上，iPad的宽度总是小于960像素，并设置了视口元标记。希望这可以帮助。 – 2013-05-05 13:25:22

感谢您的跟进。原本我有视口元集。正如你所说，iPad始终报告其宽度低于960 - 这是不正确的。在横向模式下，它的宽度比这大，所以应该触发规则以适应。再说一次，我并不专门针对iPad--我只是希望它能够“适当地”行事，并报告它的宽度是正确的（不管设备，方向等 - 我只是想要真相！） – momo 2013-05-07 05:54:18

CSS媒体查询最大宽度和ipad

回答

相关问题