Geek Answers Handbook

How to set equal font size in table cells for mobile devices of html pages

I have a problem displaying fonts on mobile devices. I have a simple table width set to 800 pixels, the total size for today's mobile phones.

The text in my cells uses the same html css makeup. The text in the first line shows ok

But the next line is a problem that is split into two cells. The left cell is the image, and the right cell has text. My problem is that most mobile web browsers reduce the font size in this cell.

It would be nice for me if this text was just spread over several lines, but this does not happen, they usually save as many lines as in the desktop view.

I set the font size using pt px and no effect in the css file like

.DefaultFont { font-family: 'Merriweather Sans', Arial,verdena,sans-serif; font-size: 13pt; font-style: normal; color:#4e0203; font-weight: 400; }

used 13pt 13em and other methods etc. nothing worked.

And for the html element they used span and div and p and tried it inside the td element, but again no effect.

PS I'm not looking for javascript tricks to scale pages on the client side with device discovery, etc. Since I just use php to determine if it has a desktop or a mobile device (which requires less code to transmit). I just need the code so that the font does not change caused by the mobile web browser.

How to disconnect these clients from scaling parts of tables?

SOLUTION The final solution, which worked very well, consisted of several people.

  • Set table width in%
  • Set the font size to vw (which, like%, also has an index of 100), a low value of 2 or so.
  • Note. vw supports a lot more than the font size as well as the image.
  • include the meta tag, which it even worked without above, but to be safe, I recommend it.
+7
android html css firefox google-chrome
source share
4 answers

You might need to use typographic units for viewports for font-size .

It can be used when you want the size of a thing through the width or height of a viewport (element container) container. Or both. Possible values:

vh - viewport height
It is proportional to the size of the container.

 font-size: 2vh;

vw - viewport width
It is proportional to the width of the container.

 font-size: 2vw;

vmin - minimum view
It is proportional to the size between "vh" and "vw".

  font-size: 2vmin;

vmax - maximum maximum coverage
It is proportional to the size between "vh" and "vw".

  font-size: 2vmax;

It certainly can give you the looks you want. Just find the current proportional value, and regardless of the size of the screen, it will match!

W3 relative viewing length docs

+4
source share

Have you tried meta tags to check if this works ...

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

This means that the browser (possibly) will display the page width across the width of its own screen. Thus, if this screen has a width of 320 pixels, the browser window will have a width of 320 pixels and not shrink and display 960 pixels (or whatever this device does by default, instead of a response meta tag).

Check out, this may be helpful ..

+5
source share

I think this should do the trick

 -webkit-text-size-adjust: none;
0
source share

You can use window.innerHeight .

0
source share

More articles:


All Articles