1

It seems that older browsers of android doesn't support vh and vw font-size unit in css. Is there any way to use vw and vh or any other way to make fonts responsive in older browsers of android? I have lots of text with different font sizes and I don't want to use media query.

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
Mokhlesur Rahman
  • 751
  • 7
  • 25

1 Answers1

4

You can do this using jquery.There are 3 steps to make fonts responsive.

  1. Adjust you fonts for a fixed with.For example 800px.
  2. Use a class name in any dom element where you want to make the font responsive.For example class="rf" (responsive font).
  3. Use the jquery code bellow to make the fonts responsive.

html code..

<div class="rf">this is sample text</div>

jquery code..

$(function(){

  var element = $('.rf');
    element.each(function (i) {
        fonts = $(this).css('font-size');
        fonts = fonts.replace("px","");
        windowWidth = $(window).width();
        fontSize = fonts*windowWidth/800;
        $(this).css('font-size',fontSize);
    });

})

change the code according to your class name "rf" and the with that you have used to adjust your font size "800".

Tanvir
  • 1,635
  • 2
  • 17
  • 31
  • 1
    well that was tricky. this will work, but I think there is some performance issue because this will load everything of the page than it will loop through all the class than the font will change. and if I want it in device orientation change I have to do that on orientation change. is there any faster way? – Mokhlesur Rahman Apr 21 '14 at 12:20
  • 1
    Set a font size for the body element (default is 16px), set all other font sizes as percentages (e.g. 24px becomes 150%), then have a script check the width of the screen and adjust the body font size; all other font sizes will adjust automatically. See my question and the workaround I posted about a similar situation: http://stackoverflow.com/questions/30280345/viewport-unit-font-size-and-zooming-bug-which-browsers-are-affected – m69's been on strike for years Jun 13 '15 at 23:38