Prevent chrome from changing text size

Question

There is an option in chrome that lets you change default font size (Small, Medium, Large, Very Large) and appearently the

-webkit-text-size-adjust:none;

line isn't supported anymore. Is there any other way I can prevent chrome from changing font size?

Answer 1

What you want to do, probably, is to operate backwards: instead of preventing the page to change the fonts size, you might want to re-calculate it based on the zoomed level in the user's window.

Have a look at this question, you can try to use the described methods to detect the zoom level in the browser and apply a "counter-zoom" to reset it to your default font-size: How to detect page zoom level in all modern browsers?

E.g.: If the users zoom at 120% you want to set your font-size to 83.3333%

The formula is simply

function yourFontSize(zoomLevel){
    return 100/zoomLevel*100
}

More examples:

• If the users zoom at 110% yourFontSize(110) // returns 90.9090909090909

• If the users zoom at 120% yourFontSize(120) // returns 83.33333333333334

• If the users zoom at 150% yourFontSize(150) // returns 66.66666666666666

• And so forth

Answer 2

Try this with jquery, I force the font-size to a specific size. Open your page, right click for Inspect. Minimize-maximize and when the text shrinks, at the top right corner you will see the screen size, force it like this:

$(window).resize(function() {
if ($(window).width() > 400 && $(window).width() < 1000)
   $('#myParagraph').css('font-size', '40px');
});

Answer 3

Chrome as any other browser has default values for how elements should look. The best way to get what you want is to implement a css script that resets all the different elements to values you know, and from their set the elements to a new desired value.

h1,h2,h3,h4,p,a {
    font-size: 50px;
}

You can also implement media-queries to change behavior as viewport change.