防止移动浏览器缩放一个HTML元素

Question

我想知道是否有人知道一种方法，可以防止浏览器缩放特定页面元素。

这是我正在开发的网站的移动版本。我有一个固定的菜单栏，它运行网站的全部宽度，并始终保持在页面的顶部以提供导航。我已经优化了按钮/文本大小以用于触摸屏，并且如果用户放大页面内容文本，并不真的希望它受到影响。

我遇到过的唯一的问题是下面的CSS，但是当我尝试它时，这似乎不工作： -webkit-text-size-adjust：none;

我不希望禁用整个页面通过视口元标记的大小调整，我只想定位菜单栏html元素。

Answer 1

缩放机制因浏览器而异，并且不是标准化的，也不是可编写脚本的。任何解决方案都将非常复杂，以便跨浏览器工作。没有简单的方法来做到这一点。

Answer 2

我写了一个基于类似问题的模式对话框，你可以找到它here。

实质上，逻辑是基于window.innerWidth和最大页面宽度获取页面缩放比例，将其作为CSS转换应用到元素，然后将其重新放置在屏幕上。如果有兴趣，我会将它重写到一个只需要一个位置的库中：固定元素作为输入，并在用户放大页面时完成所有这些魔术。