Search code examples
iphonecssmedia-queriesmobile-safariscreen-orientation

@media query doesn't trigger for iPhone 6 plus in landscape mode

I've been using the following queries based on a pretty popular answer about standard media queries for iPhone 6 models, however, the landscape mode doesn't get picked up. What is even more puzzling is that the css written for the portrait media query is still active in landscape mode.

@media only screen 
  and (min-device-width : 414px) 
  and (max-device-width : 736px) 
  and (orientation : landscape) 
  and (-webkit-min-device-pixel-ratio : 3) 
{ }

@media only screen 
  and (min-device-width : 414px) 
  and (max-device-width : 736px) 
  and (orientation : portrait) 
  and (-webkit-min-device-pixel-ratio : 3) 
{ }

Did anyone else experienced the same issue and/or is aware of a workaround?

Solution 
  • @media only

    is technically deprecated ( http://dev.w3.org/csswg/mediaqueries-4/ ), the "only" is not needed so that may be part of the issue.

    However, I've not had success w/@media in general on iPhone 6 without targeting at least 1000px.

    Their scaling method seems to send the image to the Safari mobile browser at a desktop ~2k resolution then the local device image scaling processes the scale.

    It would appear that a new method, or at least more device-specific is required.