如何在安卓设备上开启缩放功能？

Question

没错，我希望启用缩放而不是禁用它。

我创建了一个响应式网站，一切看起来都很好。但由于某些原因，在Nexus 7上（运行Android 4.2.2）的Chrome中无法使用捏合缩放。

这是我的元标记，确保以适合屏幕大小的正确CSS显示网站：

<meta name="viewport" content="width=device-width, initial-scale=1" />

在此我并没有说用户不能缩放。正如我所说，网站是响应式的，因此用户没有必要需要缩放，但是如果用户想缩放，我不希望阻止他们。在iPhone上没有问题，用户可以随意缩放。但在Android上则不行。我尝试添加user-scalable=yes和user-scalable=1，但没有任何区别。

唯一有效的方法就是删除那个meta标签，但这会使网站呈现为在大屏幕上显示时的样子，因此不再是响应式的。

有什么办法可以解决吗？

- punkrockbuddyholly

---

这不是一个答案，而是一条评论 - Android版Chrome有一种方法可以强制缩放 - 打开浏览器的主要设置，点击“辅助功能”，然后勾选名为“强制启用缩放”的选项。这样，如果您在此处找不到适合您要求的好答案，请将其作为评论添加到您的页面上。 - Vrashabh Irde

还有一个关于如何强制缩放的这个SO答案。如果没有它，我的安卓生活将会变得更糟。（更仔细地查看事物，制作更好的截图，在设计不良的网站上更轻松地填写表单...） - Frank N

Answer 1

@David Lee的顶部评论是正确的：这似乎更像是Nexus 7的问题，而不是Chrome的问题。Google在使用Nexus 7时遇到了很多关于捏合缩放的投诉，并且有猜测称他们正在尝试绕过苹果的捏合缩放专利。

据我所知，只需使用

<meta name="viewport" content="width=device-width, initial-scale=1">

应该可以工作。

我已经查看了http://m.skyscanner.com/作为一个例子，在其他设备上使用Chrome和其他浏览器(如Dolphin HD)都能正常工作。该网站只有以上的视口代码。

Android版Chrome有一种方法可以强制缩放——打开浏览器的主设置，点击“辅助功能”，然后勾选名为“强制启用缩放”的选项，看看它是否在Nexus 7上工作(我没有那个设备，所以无法测试)。

- Vrashabh Irde

Answer 2

您正在使用哪个版本的Android操作系统？如果您的版本为Android 2.2，则不支持viewport meta标签。如果您的版本在2.3.x和4.x之间，请尝试以下方法：

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes" />

希望这可以帮助你。

- David Lee

---

谢谢，它显示的是Android 4.2.2，所以那不可能是问题。我也尝试过user-scalable=yes，但在我的问题中我写成了user-scalable=true，对此我表示歉意。我现在已经编辑了我的问题。 - punkrockbuddyholly

我一直在调查这个问题，似乎Chrome浏览器在Nexus 7上的缩放选项存在问题，但我不确定是否属实。同时我在SG2手机上测试了一下，情况正常。我认为你可以尝试查看另一个具有缩放选项的网站，并检查那里的视口标签或其他配置是否启用了该选项。如果有结果，请在此处发布。我也开发响应式网站，这会很有帮助，我会继续深入研究。 - David Lee

Answer 3

虽然这不是解决你问题的完整方案，但它可以放大特定区域。

Thierry B编写了一个插件，并在github repo上发布了它。

你可以在这里演示它： 只需点击您想要放大的部分 或者请参考此教程以获取视口缩放。

- Digital Alchemist

Answer 4

use this hope it will help:

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

- Prakhar

---

据我所知，将最小和最大比例设置为1会禁用用户缩放，不是吗？ - punkrockbuddyholly

Answer 5

以下是最后一个参数：user-scalable = 1：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />

- Sergio Abreu