防止文字被放大/缩小

我正在建立一个网页，我不使用宽度和高度的像素。我只使用百分比，以便页面元素适合任何设备（在使用任何设备的页面中具有相同的百分比）。防止文字被放大/缩小

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

问题是文本不尊重这个规则。我试图使用像line-height,font-size这样的CSS属性，百分比为100％，但徒劳无功。我需要的是一个跨浏览器的解决方案，以防止文本被放大/缩小并保持其高度始终适合父div。

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

编辑：一个家的作品我问以前做过的是使用以下propoerties的，但他们不工作（铬）：

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

来源

2014-02-26 whiteletters in blankpapers

你可以发布小提琴吗？ – snaplemouton

@snaplemouton。感谢您的时间。我会在几分钟内很快发布一个小提琴。 –

“我需要的是一个跨浏览器的解决方案，以防止文本被放大/缩小”......数百万戴眼镜的人的希望是徒劳的。 –

有一个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

来源

2014-02-26 15:53:01 Joao

是的，这是我在编辑中提到的。不过，我想感谢你的额外信息。 +1 –

事实上，我正要提到这一点。我想你必须跟踪页面缩放并根据它分别调整字体大小。你可以看看这个：http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers/5078596#5078596 – George

是的，我注意到你的编辑权，我发表评论！我只是编辑了我的答案，查看了一下。 – Joao

防止文字被放大/缩小

回答

相关问题