0

I have two menu blocks. One is in the <main> and the second block just below the first one in the <footer> section. Both have exactly the same CSS font size, let's say 1rem. They are identical in size when I inspect the size using DevTools in responsive view (all good). But when I open the site on my actual phone, the footer block has smaller font size than the block above. The viewport is

<meta name="viewport" content="width=device-width,initial-scale=1">

This is how it looks like on my phone:

This is the first time I enounter such an issue, I just don't know how to approach it. I've tried using all 3 units: PX, REM, and EM. All of them produce this issue. These are the rules I'm tweaking, and they are not getting overwritten by anything. They work, but produce different result on DevTools 390*1180 and my phone which is (1080 x 2160 pixels), 401ppi

#bottommenublock a {
    font-size: 1em!important;
}

.flist a {
    font-size: 1em!important;
}

When I make, let's say the footer block 1rem, and the one above it 0.9rem; they start looking identical on my phone, but now different on the devtools. It's a mystery!

UPD 2:

Here is the edited HTML page that reproduces my issue exactly as it is. Sorry for the large CSS, didn't want to remove anything that could affect the whole picture

https://pastebin.com/0MuyByQB

UPD 3:

It must be something with my phone I guess. Just asked my partner to check the same page with her iPhone 13 and it is all fine on her phone.

user3157960
  • 1
  • 1
  • 5
    Please give us a runnable snippet and test it definitely shows the problem. See https://stackoverflow.com/help/minimal-reproducible-example And what browsers and operating systems are you using? – A Haworth Jul 24 '23 at 08:29
  • 1
    Ignoring the lack of a reproducible example (which you should definitly include to get the best answers for you). This issue could be coming from not having [a "reset CSS" file,](https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do) `em` gives a relative font-size so it's possible that something higher up the CSS tree is changing the height for one or more of these elements. You may be interested in using ["Absolute lengths"](https://www.w3schools.com/cssref/css_units.php) – Harrison Jul 24 '23 at 08:39
  • I've added a sample that reproduces the issue – user3157960 Jul 24 '23 at 09:02
  • OK, I found something interesting. When I set the font size on both to 1.3rem or bigger, they start looking identical everywhere fixing the whole problem. It also works with 21px. But anything below 21px or 1.3rem produces a visible difference in size on my phone. Very strange. Still no idea what it means, but it might be a clue of some sort – user3157960 Jul 24 '23 at 09:15
  • As requested earlier, please read https://stackoverflow.com/help/minimal-reproducible-example in particular note that putting your code onto an external site is not OK - SO is aiming to build a set of Q&A useful for future readers and external sites may disappear (or get mended) so rendering your question useless for others. – A Haworth Jul 24 '23 at 12:44

1 Answers1

0

Mobile browsers sometimes enlarge text based on some heuristics. Maybe you are running into this.

Then setting: text-size-adjust: none Should fix this.

See https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

errnesto
  • 822
  • 5
  • 15
  • Interesting idea, but didn't work, unfortunately. Please check my latest comments, I've provided an example and also some new data – user3157960 Jul 24 '23 at 09:16
  • Did you try it with vendor prefixes? (`-moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none;`) – errnesto Jul 24 '23 at 09:23
  • Just tried these, didn't do anything :( – user3157960 Jul 24 '23 at 09:38
  • Hm strange, especially that this only happens to smaller font sizes sounds like this font-size adjust thing to me. If this does not help I have no idea sorry. Maybe you could include the phone and browser you are testing on… – errnesto Jul 24 '23 at 09:46
  • It is definitely my phone, since it looks fine on my partner's iphone. My phone is oneplus 5T, chrome 114, android 10 – user3157960 Jul 24 '23 at 09:50