Question

我有一个网站的前端具有良好的格式和缩放比例，“三星Internet浏览器”以其强制的非标准字体和视口缩放比例使该网站毁于一旦。

我一直在研究检测这种缩放级别的方法，但结果却很短。如何才能检测到该浏览器施加的强制缩放级别，以便我可以相应地重新设置样式？

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解析库获取基本字体大小，但是我认为这不在此问题范围之内。

稍后，我将扩展此逻辑以通过调整元素位置和缩放比例来响应，以保留文本缩放比例，但现在，这可以解决问题。

处理三星Internet浏览器的强制字体缩放

1 个答案: