Search code examples
androidzoomingscaling

Dealing with Samsung Internet Browser's forced font scaling

I have a site with a nicely formatted and scaled front-end, which the "Samsung Internet Browser" gleefully ruins with its forced, non-standard font and viewport scaling.

I've been researching ways to detect this scaling level and have come up short. How can can detect the forced zoom level this browser imposes so I can reformat the styling accordingly?

Solution

  • So, what I discovered is that Samsung's Browser manipulates the computed font-size to apply text scaling.

    To work around this, I refactored my stylesheet to use em as the font-size units, set the body { font-size } property to a specific px value. From there, I can obtain the computed font-size in Javascript and compare it to the known correct font-size:

    /* with jQuery */

// in px
let baseFontSize = 15;
// jquery returns computed font-size
let computedFontSize = parseFloat( $('body').css('font-size') );
// calculate scaling ratio and force correct font size and set as css on body
$('body').css('font-size', ( baseFontSize * ( baseFontSize / computedFontSize ) ).toString() + 'px');


/* with vanilla js */

// in px
let baseFontSize = 15;
// get computed font-size
let computedFontSize = parseFloat(
    window.getComputedStyle( document.querySelector('body') ).getPropertyValue('font-size')
);
// calculate scaling ratio and force correct font size and set as css on body
document.querySelector('body').style.fontSize = ( baseFontSize * ( baseFontSize / computedFontSize ) ).toString() + 'px');

    My actual solution involves using ajax to load the a CSS file into a string, then using CSS parsing library to obtain the base font size, but I think that's outside the scope of this question.

    I'll later expand this logic to respond by adjusting element positions and scaling as needed to retain the text scaling, but for now, this does the trick.