无论页面缩放如何，如何为移动设备制作保持相同大小的 CSS 菜单？答案

【问题标题】：How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?无论页面缩放如何，如何为移动设备制作保持相同大小的 CSS 菜单？
【发布时间】：2012-07-25 14:00:59
【问题描述】：

我想为移动设备创建一个上下文菜单，它会在页面内容上弹出并用按钮列表填充屏幕的一部分。这很简单。

但是，无论页面在设备上的何处/如何缩放，我都希望菜单具有相同的确切大小和固定位置。因此，无论何时调用菜单，即使用户非常放大，按钮列表也会显示为相同大小。换句话说，我想模仿手机上已经存在的菜单的功能，例如 Chrome Mobile 测试版的选项菜单。

这可能只使用 CSS 吗？还是需要一些 JavaScript？还是一般情况下不可行？

换句话说，是否可以制作像这样的菜单刷新/等菜单：

无论浏览器缩放如何，它的大小都是恒定的？

【问题讨论】：

标签： javascript html css

【解决方案1】：

使用相对大小并动态更改字体大小

简单演示：http://jsfiddle.net/tQauj/3/（调整结果窗口大小）

你也可以使用 CSS3 的 scale 属性

更新版本：

动态填充和窗口居中：
http://jsfiddle.net/tQauj/22/

【讨论】：

感谢您的工作！但这在桌面浏览器上运行良好，在移动设备上没有任何作用:(

【解决方案2】：

您应该能够使用 CSS 中的绝对和或固定位置属性来执行此操作。 http://www.w3schools.com/cssref/pr_class_position.asp

【讨论】：

position: fixed 单独并不能解决缩放问题，它只是将它保存在一个地方。

【解决方案3】：

这是一个带有一些 CSS 的示例，展示了如何使菜单保持相同的大小和位置：http://jsfiddle.net/ZfKyj/2/

不幸的是，您似乎无法如此轻松地控制字体大小，主要是因为确定缩放级别实际上非常复杂：How to detect page zoom level in all modern browsers?

您最好看看是否有一种方法可以使用各种移动浏览器的 API 中的函数来生成上下文菜单，但如果没有，您也许可以从我的链接中的问题中找出一些东西上一段。

【讨论】：

position: fixed 单独并不能解决缩放问题，它只是将它保存在一个地方。