Hi , I cannot get the iphone 6 to pick up landscape media queries I have tried -
@media (max-width: 375px)
and
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape)
But it just seems to pick up the same style as the portrait iphone 6. Does this have something to do with pixel ratio? I have never had this issue before. Thanks
I thought the iphone landscape was 1024px so your media query never gets actioned.
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
That also assumes that you have the correct viewport meta tags and are also not over-riding those styles in the the normal css below that rule.
If you are designing a fully responsive website then these days you don’t really need to know about landscape or portrait as you just create a design that adapts to all widths and you collect these devices and orientations automatically without specific media queries. That does mean creating a fluid site and not a site that is a succession of fixed widths.
In essence you forget about min/max-device-width and just use min and max-width media queries as it really s the width of the viewport that you are interested in rather than specific devices.
Thanks for you response, but it doesn’t work, those conditions are for the ipad not iphone. Something strange is going on, I have listed my query ranges below. The landscape iphone 6 style doesn’t kick in until 375px, shouldn’t it trigger at 700px?. It’s strange it all works perfectly on my galaxy s5 which triggers at 640px. Do I need to change something with the viewport? currently I have the below viewport settings. Cheers
<meta name="viewport" content="width=device-width">
@media (max-width: 1200px) {/*styles*/}
@media (max-width: 1000px) {/*styles*/}
@media (max-width: 900px) {/*styles*/}
@media (max-width: 800px) {/*styles*/}
@media (max-width: 700px) {/*styles*/}
@media (max-width: 375px) {/*styles*/}
That’ll teach me not to read the post properly - sorry 
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.
IMPORTANT
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. 
Thanks heaps for this, it was the viewport, I added the initial scale and it worked perfectly. Cheers
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.