1

Again and again I'm faced with the problem that some HTML texts are displayed too large in Google Chrome on Android devices (tested with Samsung Galaxy S6 & S8). Everything looks good in Mozilla Firefox (on Android devices).

To show the problem, I've created a short web page. Usually this happens when I have long texts in tables.

If the text in the table is not too long, everything looks good: http://test.seekware.ch/textlengthokay.html

<html>
  <head>
    <style type = "text/css">
      div {
        font-family: verdana;
        font-size:   12px;
      }
    </style>
  </head>
  <body>
    <div>Text in normal size - Text in normal size - Text in normal size - Text in normal size - Text in normal size</div>
    <table>
      <tr>
        <td>
          <div>This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long</div>
       </td>
      </tr>
    </table>
  </body>
</html>

Text size is okay

But if the text in the table is a bit longer, then the text is displayed much too large: http://test.seekware.ch/textlengthnotokay.html

<html>
  <head>
    <style type = "text/css">
      div {
        font-family: verdana;
        font-size:   12px;
      }
    </style>
  </head>
  <body>
    <div>Text in normal size - Text in normal size - Text in normal size - Text in normal size - Text in normal size</div>
    <table>
      <tr>
        <td>
          <div>This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long - This text is too large if the text is too long</div>
       </td>
      </tr>
    </table>
  </body>
</html>

Text size is not okay

Both texts should be displayed with font size 12.

Is this a bug or am I doing something wrong that violates the HTML guidelines? Or is there a workaround to write long texts in a table?

Seeky
  • 78
  • 1
  • 9
  • Perhaps try using em instead of px? https://stackoverflow.com/questions/609517/why-em-instead-of-px#:~:text=The%20main%20reason%20for%20using,for%20users%20with%20visual%20handicaps. – buzz Jun 29 '20 at 20:01
  • Try to use em instead of px - https://stackoverflow.com/questions/22666907/website-text-is-bigger-in-chrome-on-android?rq=1 – buzz Jun 29 '20 at 20:07
  • Thanks for the suggestion, but ```font-size: 1em !important;``` unfortunately doesn't solve the problem. – Seeky Jun 29 '20 at 20:50

1 Answers1

0

there is a format on writing html files.. you should use meta tag.. that may help you maintaining port width of your files! i am giving you the link for learning about meta tag read this documentation

i will provide yoou a basic html template.. try writing your html files in that format.. this may help you!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
Ragul Shiv
  • 21
  • 1
  • 3
  • Thank you very much for your reply and yea, you're right, `````` actually solves the problem with the different text sizes, even on my real web pages. But the problem is that the web pages on the mobile are now so large that you can no longer see the full width of the web pages on the screen and you also can't zoom out. If I reduce the value of ```initial-scale```, I've again the problem with the different text sizes. – Seeky Jun 29 '20 at 22:14