html - 防止文本被放大/缩小

Question

我正在构建一个不使用宽度和高度像素的网页。我只使用百分比，以便页面元素适合任何设备(无论使用什么设备，页面中的百分比都相同)。

这种方法的结果之一是浏览器的缩放不会影响我的 div 的大小(我非常喜欢)。

问题是文本不遵守这条规则。我尝试使用百分比为 100% 的 CSS 属性，如 line-height、font-size，但没有用。我需要的是一个跨浏览器的解决方案，以防止文本被放大/缩小并保持其高度始终适合父 div。

我希望我能正确解释自己。感谢您的帮助。

编辑:我在询问之前完成的家庭作业之一是使用以下属性，但它们不起作用(chrome):

 -webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
-moz-text-size-adjust:none;
text-size-adjust:none;

Answer 1

有一个 CSS 属性可以用于此目的，尽管它只适用于移动浏览器并且它是非标准的，因此它需要支持它的浏览器的每个相应前缀。:

-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;

另请参阅此页面:https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

对于桌面浏览器，没有简单的解决方案，因为并不真正推荐这样做。尽管您可以尝试找出一种方法来检测用户是否使用 Javascript 或 JQuery 缩放实际页面并相应地更改文本字体。

编辑 好的，所以我四处搜索了一下，发现了一些可能对您有帮助的东西，但不太确定。显然，您可以在 Javascript 或 JQuery 的 .resize() 上绑定(bind)一个事件处理程序“onresize”来检查用户是否缩放了页面。示例:

var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
    var zoomNew = document.documentElement.clientWidth / window.innerWidth;
    if (zoom != zoomNew) {
        // zoom has changed
        // adjust your font
    }
});

让我知道这是否有效。从这个答案中获取代码到这里的另一个问题 https://stackoverflow.com/a/6168235/2854344