Elements in one page and set one font-size but display differently?

Question

Here's my code, please open in chrome devtool and open mobile simulator：

* {
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
  width: 100%;
}

#app {
  height: 100%;
  background-color: lightcyan;
}

#wrapper {
  overflow: auto;
  background-color: lightblue;
}

div {
  font-size: 24px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=750,maximum-scale=1.2,user-scalable=no">
  <title>Title</title>

</head>

<body>
  <div id="app">
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div>Test font sizeTest font size</div>
    <div id="wrapper">
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
      <div>Test font sizeTest font size</div>
    </div>
  </div>
</body>

</html>

screenshot

One font size in one page have two appearance, it's so strange. There some ways I find can make font size behave the same:

remove style height:100% from #app
delete some div element(e.g. leave two in div in app and two div in wrapper)
change width attribute of viewport to device-width
remove style overflow on #wrapper

But those ways can't explain my question.

I just pasted your code into a snippet and all the font looked the same. What's the browser? Do you have any plug-ins/extensions enabled on your browser? — Alexander Nied, Aug 11 '17 at 02:12
@AlexanderNied: I have change my description, please open in chrome devtool and open mobile simulator — Smart Coder, Aug 11 '17 at 02:21
I am the browser cache police, remove your browser cache right now! — Mindless, Aug 11 '17 at 02:48
@Mindless: I have removed, sir ! But not working, sir ! What should I do, sir! — Smart Coder, Aug 11 '17 at 03:16
It is actually a behavor of `viewport`. Need a seriously look in it. — Duannx, Aug 11 '17 at 03:25
@Mindless: I set 24px for div element,and chrome devtools shows font size is not covered,but when I switch to `computed` tab, it shows the font size is 36px，very very strange! But if you use the ways I said above, every thing will hehave normally. — Smart Coder, Aug 11 '17 at 03:30
@Risa__B: Yeah,I know maybe the question is caused by viewport,but I want to know why it happened.Is this a bug of viewport? — Smart Coder, Aug 11 '17 at 03:34
Sorry about my first answer - I read your question too fast. I have updated to explain this phenomenon. It's not a bug, it's a feature. — Jonathan, Aug 11 '17 at 04:12

score 2 · Accepted Answer · edited Mar 08 '23 at 09:06

TL;DR: Some mobile browsers (and Chrome inspector) auto-scale text when they believe they can safely do so. The overflow:auto; is one of those instances. To prevent this behaviour, use -webkit-text-size-adjust: 100%;

According to drafts.csswg.org:

One common problem with this type of interaction occurs when the user wants to read a large block of text. It might be that a block of text within this desktop-formatted page might be laid out so that when the user zooms in so that the text is large enough to read, each line of text is wider than the display on the small device. This means the user needs to scroll side to side to read each line of text, which is a serious inconvenience to the user.

One way for software that displays Web pages or other CSS-formatted content on a mobile device is to make some of the text larger so that this problem does not occur. The goal of this enlargement is to make the text big enough so that when the block it is in is scaled to the width of the display, the text is large enough to read. At the same time, this needs to be done with minimal disruption to the overall design of the page.

Mozilla also explains the mobile text size adjustment:

Because many web pages have not been developed with mobile in mind, smartphone browsers differ from desktop browsers in the way they display web pages. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually 800 or 1000 pixels wide. To map the wide layout back to the original device size, the browser either shows only part of the whole render, or the viewport is scaled down to fit.

Because text that has been scaled down to fit a small screen is very small, many mobile browsers apply a text inflation algorithm to make the text larger and more readable. When an element containing text uses 100% of the screen's width, its text size is increased until it reached a readable size, but without modifying the layout.

According to Mozilla, overflow: auto; establishes a new block-formatting context:

The overflow CSS property specifies whether to clip content, show scrollbars, or display overflowing content when it is too large for its block-level container.

Because the overflow:auto; is breaking out of its parent context, some mobile browsers (and obviously Chrome's web inspector as well) are free to apply the mobile text size adjustment. This behaviour can be disabled by using:

body, html {
    -webkit-text-size-adjust: 100%;
}

The #app div and it's children (except for the #wrapper div with the overflow) inherit the 750px width from the viewport meta.

add `-webkit-text-size-adjust: 100%; ` to `#app` can resolve this problem! Thanks god! It has been bothering me for several days! — Smart Coder, Aug 11 '17 at 04:15
Yes, or even to the `body, html` if you want to avoid adding it everywhere. Great question! — Jonathan, Aug 11 '17 at 04:17
@gelivableCoder -- glad to see you found an answer! Make sure to mark this as your selected answer, so visitors to this post see what the working solution was and so Jonathan gets credit for his answer. Happy coding! — Alexander Nied, Aug 11 '17 at 21:10
@AlexanderNied: Sorry,I'm new here.Can you tell me how to accept answer? — Smart Coder, Aug 12 '17 at 05:28
@gelivableCoder -- no worries :) From [here](https://stackoverflow.com/help/someone-answers): "To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in." — Alexander Nied, Aug 12 '17 at 20:27

score 0 · Answer 2 · answered Aug 11 '17 at 12:00

0

Your viewport meta tag is a bit strange:

<meta name="viewport" content="width=750,maximum-scale=1.2,user-scalable=no">

Although it contains user-scalable=no, it does contain maximum-scale=1.2, a width setting that has no unit (px) and no initial-scale setting. I think that might causes strange behaviour in some browsers which can't interpret that properly.

answered Aug 11 '17 at 12:00

Johannes

64,305
18
73
130

According to https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag , `width` seems no need to specify the unit.As fo `initial-scale`,I'd like mobile browser to help me to compute the initial scale, so I didn't add `initial-scale` setting – Smart Coder Aug 12 '17 at 05:40

Elements in one page and set one font-size but display differently?

2 Answers2