Question 45185 in Html Question posted in
Some basic documentation can be found here.

Why is there a different font size within tables, only, on mobile device? – Html

In the following HTML example, we have usual text and a table with text. In desktop mode, the font sizes between the usual text and the table’s text match. But if you view it on a mobile device (or in responsive mode via DevTools), the font size of the table’s text is smaller:

<html>
<body>
Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! Here's normal text! 

<table>
<tr>
<td>Text in the column</td>
</tr>
</table>
</body>
</html>

Unfortunately, this cannot be reproduced on jsfiddle/etc., but if you store this HTML into a local file, open it in Chrome and switch to mobile mode via DevTools, then it can be reproduced:

enter image description here

What’s the reason for that and how can it be circumvented?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The reason is, that obviously for mobile devices support you need to provide at least this special metadata in the header:

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

    Otherwise, it behaves odd in some constellations (e.g. tables).

    The width=device-width meta tag is not strictly necessary for viewing the page on a desktop PC because desktop browsers typically do not scale the page based on the screen size or pixel density of the device. Instead, they typically display the page at the same size as it was designed, regardless of the device being used to view it.

    In contrast, mobile devices can have a wide range of screen sizes and pixel densities, and the default behavior of some mobile browsers is to zoom out to show the full width of the page. This can make text within tables appear very small and difficult to read. By including the width=device-width meta tag, the browser is instructed to scale the page to the width of the device's screen, which can help to make the text in tables more legible.


  2. 0

    I don’t think you posted enough code, but try using media queries to target specific devices. You can post the code to duplicate the issue on jsfiddle.net

    Media Query Examples
    @media only screen and (min-width: 275px) {
    …css here…
    }

    @media only screen and (min-width: 769px) {
    …css here…
    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search