仅针对 Android 设备关闭网站缩放 [重复]

Posted 2023-03-31

【中文标题】仅针对 Android 设备关闭网站缩放 [重复]

【英文标题】：Turn off zoom on website for Android devices ONLY [duplicate]

【发布时间】：2015-01-20 16:02:22

【问题描述】：

如何关闭我们网站上的缩放功能，但仅适用于 android 手机/设备（但不影响 iPhone）？

如果我只针对 Android 上的 Chrome 浏览器可能没问题，但还要检查以确认手机屏幕尺寸。

【问题讨论】：

这真是糟糕的做法。实际上，您这样做实际上是在违反无障碍建议（想想有视力障碍的人）

是的，我知道这不是一个好主意，但我们有这种在 Android 和 iPhone 上呈现不同的表单。

向我们展示“表格”，我们会看到我们能为您做些什么！

谢谢！抱歉，这很复杂，因为它有很多分层的引导元素。但基本上，它是一个与屏幕底部对齐的表单。在 Android 上，当单击输入字段时，键盘会向上推动整个页面，这样您就无法再看到您正在输入的字段。ios 键盘显然会在页面顶部打开，并且不会导致这个问题。

那你为什么不添加一个 margin-bottom 或 padding-bottom 来解决这个问题？

【参考方案1】：

你应该用来关闭缩放功能的元标记将是下一个：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

阅读this *** question的答案部分可以找到更多信息

接下来您要做的就是了解用户的操作系统。这样做的方式取决于服务器的编程语言。

好的，既然你使用的是 Ruby，你可能需要类似的东西

request.user_agent.include?("Android")

获取用户的操作系统。但是您必须知道，我们不保证会发送此信息。

所以，结合这两个元素，我们得到了类似的东西：

<% if  request.user_agent.include?("Android") %>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<% end %>

【讨论】：

谢谢。我正在使用 Ruby/Rails。我也许可以使用 javascript 来获取浏览器并检查它是否是 Chrome。我怎样才能将它与元标记结合起来？

【参考方案2】：

把它放在你的 html 的头部。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

【讨论】：

谢谢。这也会影响 iOS 设备吗？

是的，它将影响所有移动设备。想想它几乎可以将您的网站变成一个原生应用程序。

有没有办法只对 Android 设备或移动 Chrome 浏览器执行此操作？

您需要使用 php 或 javascript 通过获取用户代理然后使用 if 语句为所述用户实现元标记来执行此操作。不幸的是我不知道该怎么做。但我不介意你应该让你的网站在所有浏览器/设备上呈现相同的内容。从长远来看，不会让人头疼。

@Darkrum: see this 用于安卓检测