Does iPhone 6 still report the same width in portrait and landscape?

Question

I can't seem to find an answer for this, and I don't have access to an iPhone 6 or 6 Plus.

All previous iOS devices would always report their width as the width of the device in portrait mode, even if they knew they were in landscape mode. I'm wondering if we need to create even more specialized media queries for the new devices with their new screen sizes, or if they're finally reporting the correct width in landscape mode.

Thanks!

• I should add, I'm asking mostly in terms of CSS Media Queries, when we're checking for width or device-width. For example, older iOS devices would report device-width as 768px in both portrait and landscape mode.

Answer 1

With regards to iOS specifically, the best practice for determining width of device viewport is to use CSS orientation media query. 768px is only for older iPads. Here's a list of queries you should use for each device instance:

---

iPhone 6:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

iPhone 6 Plus:

@media only screen 
and (min-device-width : 540px) 
and (max-device-width : 960px) { /* STYLES GO HERE */}

If you want your CSS to be applied specific to the context of portrait or landscape, then you'd need to add an orientation query as well for that specific case.