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

回答

相關問題