3

With the launch of new iPhone 6 Plus with a resolution of 1920x1080 px, it got me thinking how is this resolution different from the screen widths we UI developers define in our CSS in media-query tags?

For example, common breakpoints are 480, 768, 992, and so on but if a phone as a 1080p screen, how do you show your mobile site on this device. Technically, it should display the widest version of your desktop site but I know it'll display the mobile site. So how does "below 768" media query apply to a device of 1080px width (in portrait)?

My phone has a 4.7" screen and a resolution of 540x960px (pathetic, i know) and I tested some of my own websites on the device. The layout is similar to what you'd get if you use device mode in chrome on a computer and decrease the width to about 380px. That means, during testing the display that I get on 380px on computer will be identical to a phone with a device resolution of 540px, getting me?

So the question is, as a UI developer how do you predict at what resolution will your website be displayed? Hope I made the question clear enough. Thanks

Whip
  • 175
  • 1
  • 7

1 Answers1

2

There is a difference between the physical pixels that iPhone 6 plus can display and the screen size. Screen size is the pixel size that affects your CSS media query.

IPhone 6 plus has screen size of 414 x 736 Pixel and browser window size a bit different due to menu space.

Good explanation can be found here: http://www.kylejlarson.com/blog/2015/iphone-6-screen-size-web-design-tips/

Basically it means you are good to go with breakpoints 480 pixel for portrait and 768 pixel for landscape for iPhone 6 plus.

Stefan Korn
  • 206
  • 1
  • 4