Breaking on modern mobile phones

[Jorus]

Let's say I make a website with no Breakpoint and use a fixed text height of 12.

Then I visit the website from an Iphone with 1024 pixels wide (iphone 12 mini for example). Will my text be unreadable small on the Iphone?

And if so, how do I prevent this issue since the iphone won't break below 1024 pixels. Without needing to use 16+ text height for both desktops and mobiles.. Or am I missing something?

[Pablo]

If you want to use a different font size of smaller screens, then you will need to add a breakpoint. There is no other way to do this in HTML.

[Jorus]

Is there a difference between pixels and breakpoint? I mean if the phone device has 1024 pixels wide which is almost as much as a small older/B brand laptop, how is is to be broken..

[Pablo]

If you add a breakpoint then you can set a different font-size for different devices.
Otherwise the font-size will be the same for all devices.

[crispy68]

One thing to keep in mind is that the pixel size (screen size) is different from the viewport size. The viewport size for an iPhone 12 mini is 375px x 812px. When using breakpoints, you want to choose breakpoints that correspond to the viewport sizes you are targeting. Unfortunately, there are a lot of different phone viewport sizes out there and some have odd sizes (like this one at 375). So you need to try and pick breakpoints that a majority of devices will fall into versus trying to target one specific device.

here are some links to sites with lists of mobile devices and their viewport widths:

https://viewportsizer.com/devices/
https://viewportsizes.com/

You can google more sites that have may have other devices.