CSS media queries for Iphone 7 and 7 plus

Question

I need to check some additional CSS specific to iphone 7 & 7 plus, does iphone 6 and iphone 7 have same physical height / width? If possible please mention the media query.

Solution 1

http://stephen.io/mediaqueries/ has a list of media queries for specific Apple products, but you should try to avoid styling for each device individually, since this will increase the amount you need to write by a lot. Your issues might be caused by the browser being used, rather than the specific device. Check for that before styling for one device.

This website suggests that it does have the same resolution as the iPhone 6, so the same query will target both. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

iPhone 6 in portrait & landscape

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

iPhone 6 Plus in portrait & landscape

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

Solution 2

Using exact screen dimensions is not something i would advise. You will run into a host of screen sizes that will break your layout.

You should just design so it works at any width between 300px and say 950px. Then all devices are taken into account.

Comments

[Ivan Durst]

Where did you get the dimensions 300px - 950px?

[jarrodwhitley]

You know where it was pulled from :P