Question

我正在构建一个网页，我不会在宽度和高度上使用像素。我只使用百分比来使页面元素适合任何设备（无论使用何种设备，页面中的百分比都相同）。

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

问题在于文本不遵守这一规则。我尝试使用像line-height，font-size这样的CSS属性，百分比为100％，但是徒劳无功。我需要的是一个跨浏览器的解决方案，以防止文本放大/缩小，并保持其高度始终适合父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（）上绑定事件处理程序“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

防止文本放大/缩小

1 个答案: