Menu
I would like to have a simple website that works both on desktop and mobile browser, and encountered a weird (rookie) problem: when I have a table whose column texts are of different length, the font sizes rendered in mobile device are dramatically different. Any idea why this is happening and what is a quick and clean fix? Thanks in advance for your help!
The HTML code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: medium;
}
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>Short text. Short text</td>
<td>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. </td>
</tr>
</table>
</body>
</html>
Renders okay on desktop browser
Weird font size on mobile browser (chrome emulator)
411
Fonts appearing differently on mobile sitesDifferent browsers and devices use a variety of rendering engines which may result in minor differences in the way your font appears. Fonts also render differently between iOS and Android, and the significance of the difference can vary from font to font.
You can try adding text-size-adjust: none; css to your html body tag, it'll prevent text size increasing.
Prevent-system-font-size-changing-effects-to-androidForms Android MainActivity. cs, override the Resources and set the configuration to default to restrict the font size effect on application. Resources. UpdateConfiguration() has been deprecated in API 25.
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.
You need to consider setting the viewport of your application. To make a mobile-friendly web application, you will need to set this in your headers. You can do so by adding a <meta> tag between your <head> tags. Here is an example:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
For a full description of what a viewport is and how it is used, you can visit the article Configuring the Viewport from Apple Developer as it was first introduced for Safari Mobile.
69
Eventually you might also need
text-size-adjust: none;
-webkit-text-size-adjust: none;
to make sure that text is not renderred bigger or smaller depending on the size of table cells. Especially in Safari on iOS I found this to be relevant.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With