5

Im trying to make my website responsive to mobile devices.

I heard chrome's dev tools can simulate devices based on their resolutions. But chrome has some weird resolutions.

Iphone 7

  • dev-tools: 375x667px
  • officially: 750x1334px

Iphone 7 Plus

  • dev-tools: 414x736px
  • officially: 1080x1920px

Even though they're different the simulator seems to be pretty accurate WHY?. This is seriously stressing me out as i don't if my max-width in my media queries are accurate on a genuine device or not.

Improve this question

1 Answer 1

Reset to default
4

The resolution shown in the dev-tools is NOT pixels but points. Its used to ensure compatibility across different types of screens and resolutions (e.g. retina screen etc).

Modern mobile devices easely reach HD-resolution which would result in rendering the content just the same as on a desktop-browser. That's why the Iphone 7/8 Plus is shown as 414 in width. The phone is rendering the content and scaling it up to the actual screens resolution. This way you get a mobile view on full resolution.

enter image description here

You can read about the details here:
https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .