1

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

The obvious was:

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

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

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?

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

Thanks.

momo
  • 3,885
  • 4
  • 33
  • 54

1 Answers1

0

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

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

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.

Hope this helps.

Adam Simpson
  • 3,591
  • 2
  • 22
  • 27
  • Thanks for the reply. I don't want to target the iPad specifically - I want any viewport less than 960, regardless of the device, to use the provided rules. So if an iPad (or any device) is less than 960 in portrait, it should respect the rules provided (which iPad specifically does not appear to do). If it happens to be wider (because of landscape orientation, but not predicated on the orientation), it should not. Currently, it looks like it always acts as if it's less than 960. I would not expect it to in landscape mode. Any ideas? – momo May 02 '13 at 21:24
  • Sorry for my tardy reply. James Holderness' anwser about the viewport is definitely something you should do and something I totally forgot about. A good recap of the viewport effects can be found in [this](http://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard#answer-9049670) answer. I put together a quick [codepen](http://codepen.io/asimpson/pen/sJeoE) so you can see the behavior and modify it to get the results you want. Essentially the iPad width is always less than 960px with the viewport meta tag set. Hope this helps. – Adam Simpson May 05 '13 at 13:25
  • thanks for following up. I had the viewport meta set originally. As you said, the iPad always reports its width at less than 960 - which is not true. When in landscape mode, it's width is larger than that, and so should trigger rules to accommodate. Again, I'm not targetting iPad specifically - I just want it to act "appropriately" and report it's correct width (regardless of device, orientation, etc - I just want the truth!) – momo May 07 '13 at 05:54