防止chrome改变文字大小

Question

chrome 中有一个选项可以让您更改默认字体大小（小、中、大、非常大），并且看起来

-webkit-text-size-adjust:none;

不再支持线路。有没有其他方法可以阻止 chrome 改变字体大小？

Answer 1

Chrome 与任何其他浏览器一样，对于元素的外观也有默认值。 获得您想要的效果的最佳方法是实现一个 css 脚本，该脚本将所有不同的元素重置为您知道的值，并根据它们将元素设置为新的所需值。

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

您还可以实现媒体查询来改变视口变化时的行为。

Answer 2

您想要做的可能是向后操作：您可能希望根据用户窗口中的缩放级别重新计算字体大小，而不是阻止页面更改字体大小。

看看这个问题，您可以尝试使用所描述的方法来检测浏览器中的缩放级别，并应用“反缩放”将其重置为默认字体大小：如何检测页面缩放级别所有现代浏览器？

例如： 如果用户缩放到 120%，你想将字体大小设置为 83.3333%

公式很简单

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

更多示例：

• 如果用户缩放至 110%

  yourFontSize(110)  // returns 90.9090909090909

• 如果用户缩放至 120%

  yourFontSize(120)  // returns 83.33333333333334

• 如果用户缩放至 150%

  yourFontSize(150)  // returns 66.66666666666666

• 等等

Answer 3

用 jquery 尝试一下，我将字体大小强制为特定大小。打开您的页面，右键单击“检查”。最小化-最大化，当文字缩小时，在右上角你会看到屏幕尺寸，像这样强制它：

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

Answer 4

在我的例子中，缩小时文本变得非常小，为了防止这种情况，我在 html 元素上使用了

可扩展单位

来调整我的字体大小等于我的屏幕宽度（缩小时屏幕宽度会增加）。

html {
    /* font-size: 25px; */
    font-size: 1.1vw;
}