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

Question

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

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

我唯一遇到的是以下CSS，但是当我尝试它时，这似乎不起作用：     -webkit-text-size-adjust：none;

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

Answer 1

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

Answer 2

我根据类似的问题写了一个模态对话框，你可以找到它here。

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