Mobile device simulation in Chrome/Edge developer tools

[xoggoth]

Wondering if this approach is a good idea for mobiles:

html {
font-size: calc(15px + 0.390625vw);
}

h1 {font-size:1.2rem; font-weight:bold; padding:0px; width:100%; text-align:center;}
h2 {font-size:1.1rem; font-weight:bold; padding:0px; width:100%; text-align:center;}
etc.

https://matthewjamestaylor.com/responsive-font-size

All looks pretty good on Chrome and Edge mobile simulators at various sizes but text rather small on my Pixel 4a. It is a reasonably recent one, got it 2 or 3 years ago and first release was in 2019 and Chrome is up to date. Must be quite a few older phones in use.

[TheGreenBastard]

Do something like:

@media screen and(max-width: 360px) {
    html {
        font-size: 18px;
    }
}

Where 360 is your desired size where you want to override the calculated size with something more legible.

[andromedan]

This is a code smell...
font-size: calc(15px + 0.390625vw);
Why do you need to add a viewport width there? (this is probably the issue for your bug)
you don't even need to use max-width

you can use mobile-first approach and use min-width

[xoggoth]

Ah, some answers, cheers chaps! I'll do a bit more fiddling. Looks useful.