how to set equal font size in table cells for mobile device html pages

Question

I got a problem with font rendering on mobile devices. I have a simple table width set fixed to 800 pixels, common size for todays mobiles.

Text in my cells all use the same html css makeup. The text in the first row show ok

But the next row is a problem it is split into two cells. The left cell is a picture and in the right cell there is some text. My problem is that most mobile web browsers scale down the font size in that cell.

To me it would be oké if that text would simply be spread over a bit more lines but that doesn't happen, they tend to keep as much lines similar as in a desktop browser view.

I've 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 used span and div and p and tried it inside td element, but again no effect.

PS I'm not looking for javascript tricks for scaling pages client side with device detection etc. As i simply use php to determine if its a desktop or a mobile device (which requires less code to be transmitted). I just need the code so that the font wont change as caused by a mobile web browser.

How do i stop those clients from rescaling parts of tables ?

---

SOLUTION The final solution that worked really nice was a combination of multiple people here.

• Set table width's in %
• Set font size in vw (which like % has also a 100 index), a low value like 2 or so.
• Note vw is supported by lots more then just font size, also images.
• include the meta tag it even worked without that after above, but to be on the safe side i recommend it.

Answer 1

Have you tried Meta tags,to check if it works...

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

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).

Check out,It may be helpful..

Answer 2

Maybe you should use viewport sized typography units for the font-size.

It can be used when you want to size thing through the viewport's (element container) width or height. Or both, for that matter. The possible values are:

vh - viewport's height
It sizes proportionaly to the container's height.

font-size: 2vh;

vw - viewport's width
It sizes proportionaly to the container's width.

font-size: 2vw;

vmin - viewport's minimum
It sizes proportionaly to the smaller between 'vh' and 'vw'.

 font-size: 2vmin;

vmax - viewport's maximum
It sizes proportionaly to the larger between 'vh' and 'vw'.

 font-size: 2vmax;

It surely can give you the looks that you want. Just find the current proportional value, and no matter the screen's size, it will fit!

W3 viewport relative length's docs