0

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?

Community
  • 1
  • 1
Gregory M
  • 494
  • 1
  • 4
  • 11

1 Answers1

2
@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.

Chris Shaffer
  • 66
  • 2