Font Sizes on small-width laptop window bigger than on phone

[tatianaanthony]

I may be doing something wrong here. But I have no clue what and could use some help.

I check my site on my laptop, on a minimum-width browser window. Per multiple sites, the viewport is 450 px wide (434 with a scrollbar), and therefore smaller than the "small" breakpoint. The page looks like this:

Note that the first line ends at "They".

I check the site on my phone.


The phone's viewport width is supposedly 375, smaller than the laptop window's.

And yet, the font looks visibly smaller, and indeed, the first line fits an extra word!

For testing purposes, I set up the breakpoints to have every size 16 px font (based on this comment in issue #1219 ):
`html {
font-size: 16px; // change to whatever

@include breakpoint($small) {
  font-size: 16px; // change to whatever
}

@include breakpoint($medium) {
  font-size: 16px; // change to whatever
}

@include breakpoint($large) {
  font-size: 16px; // change to whatever
}

@include breakpoint($x-large) {
  font-size: 16px; // change to whatever
}

}
`
I verified that both devices are using the default size breakpoint, by changing the font to 32 px and seeing if the size on the device changes (it did), which also means that it's reloading the CSS successfully.

So since they're using the same size breakpoint, theoretically, nothing should be making the font sizes different between them, and the laptop, with about 15% more pixel width than the iPhone, should be able to fit more words, right?

What am I missing? Is there some weird quirky thing that I'm missing with the DPR or something? Or is there some way that the actual device type affects the physical size of the font?

Would love some help.

Thanks!

[tatianaanthony]

I was being a fool. I had my laptop window zoomed in to 140%. So functionally, it was only 310 px wide. All is well. Thanks.