All geek questions in one place

HTML / CSS: table font size different from mobile device

I would like to have a simple website that works on both a desktop and a mobile browser, and ran into a strange (newbie) problem: when I have a table whose column texts have different lengths, the font size displayed on the mobile device is dramatically different. Any idea why this is happening, and what is a quick and clean fix? Thanks in advance for your help!

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>

The desktop browser displays well

desktop

Strange font size in a mobile browser (chrome emulator)

mobile

+11
source share
2 answers

You should consider setting the viewing area of your application. To create a mobile web application, you need to install it in your headers. You can do this by adding a <meta> between your <head> tags. Here is an example:

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

A full description of what the viewport is and how it is used can be found in the article Customizing the viewport from Apple Developer, as it was first introduced in Safari Mobile.

+11
source

try it

  body { font-family: Verdana, Geneva, Arial, sans-serif; font-size: 15px; }
-1
source

Source: https://habr.com/ru/post/978538/

More articles:


All Articles