: How does the Media Query apply to smartphone resolutions? 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

@Miguel251

Posted in: #Css #Mobile #Resolution #ResponsiveWebdesign

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

Vote Up Vote Down

Login to post a comment!