处理 Samsung Internet Browser 的强制字体缩放

Question

我有一个网站，其前端的格式和缩放都很好，"Samsung Internet Browser" 兴高采烈地用它强制的、非标准的字体和视口缩放破坏了它。

我一直在研究检测这种缩放级别的方法，但一直没有成功。如何检测此浏览器强加的强制缩放级别，以便我可以相应地重新设置样式？

Answer 1

所以，我发现三星的浏览器操纵计算的 font-size 来应用文本缩放。

为了解决这个问题，我重构了我的样式表以使用 em 作为字体大小单位，将 body { font-size } 属性设置为特定的 px 值。从那里，我可以获得 Javascript 中的计算 font-size 并将其与已知的正确 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');

我的实际解决方案涉及使用ajax将CSS文件加载到字符串中，然后使用CSS解析库来获取基本字体大小，但我认为这是在外面这个问题的范围。

稍后我将扩展此逻辑以根据需要调整元素位置和缩放以保持文本缩放以做出响应，但就目前而言，这可以解决问题。

处理 Samsung Internet Browser 的强制字体缩放

Dealing with Samsung Internet Browser's forced font scaling

scaling

android

zooming