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

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
2
  • So the CSS pixels are equal to screen size in points? You get points from advertised resolution number by dividing the resolution with a multiplier (3, in case of retina display), is that right?
    – Whip
    Oct 27, 2015 at 11:18
  • Basically yes, as far as I understood 1 point here means an equivalent of 1 pixel on a non-retina display. iPhone 6 Plus has retina factor 3, but previous retina display had factor 2. Also on iPhone 6 Plus there is a gap between the rendered pixels (1242 x 2208 Pixel, Retina 3x) and the physical pixel (1920 x 1080 Pixel), So here you cannot calculate from the advertised size with retina factor directly to Screen size, while for previous iPhone this worked (Retina factor 2).
    – Stefan Korn
    Oct 27, 2015 at 12:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.