Trouble with iphone 6 media queries

That’ll teach me not to read the post properly - sorry :frowning:

As I said above chasing viewports and orientation is futile because there are just too many of them and as you found out things are not what you may expect. (You probably also need to make a distinction between max-device-width and max-width when chasing landscape and portrait.)

Here is a boilerplate that lists all the ios media queries with relevant widths.

Of course that is just ios so you probably need another 500 media queries for other devices if you follow that route.


You MUST SET INITIAL SCALE to 1 on the viewport ,meta tag or IOS will not react to orientation change properly. All my tests in that previous link fail without initial scale. This may be linked to your problem anyway.

I must re-iterate that chasing devices is really out of the question these days unless you are specifically targetting a device. I believe there are over a hundred devices out there now all with different resolutions for portrait and landscape not to mention that you have no knowledge of what an iphone 7 will look like whenever it arrives

The best course of action is to forget about all devices and orientation and simply base the design on min or max-width. This is very easy because by default an unstyled web page will adapt to all pages without doing anything to it (apart from adding the viewport meta tag). It’s only when the designer starts styling it that it breaks down :).

All you need to do is design on the desktop and drag your browser window smaller or wider. If at any point you see a horizontal scrollbar on the viewport or if the design doesn’t work well at the width you are looking at then throw in a media query at that width and change the design to fit. In a fluid site a few well placed media queries will cater for hundreds of devices whether they be in landscape or portrait mode. It really is that simple and the way forward. :smile: