Breakpoint sizes don't match phone resolution

This is more of a general comment/query. According to the manufacturer my phone’s screen resolution is 720px wide, but when testing different breakpoints on my phone, the screen size that fits (according to the webflow layout rulers) is 414px wide.

Why this inconsistency?

That’s because of pixel density, not an issue with Webflow.

CSS Pixel = Device Pixels / Device Pixel Ratio

I always saw those numbers as a rough guide as opposed to an exact metric - not to mention your website should respond to a fluid width as opposed to a fixed one. Check out this article here (where I got the quote above) that should give you some more information.

1 Like