【问题标题】:Turn off zoom on website for Android devices ONLY [duplicate]仅针对 Android 设备关闭网站缩放 [重复]
【发布时间】:2015-01-20 16:02:22
【问题描述】:

如何关闭我们网站上的缩放功能,但仅适用于 Android 手机/设备(但不影响 iPhone)?

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

【问题讨论】:

  • 这真是糟糕的做法。实际上,您这样做实际上是在违反无障碍建议(想想有视力障碍的人)
  • 是的,我知道这不是一个好主意,但我们有这种在 Android 和 iPhone 上呈现不同的表单。
  • 向我们展示“表格”,我们会看到我们能为您做些什么!
  • 谢谢!抱歉,这很复杂,因为它有很多分层的引导元素。但基本上,它是一个与屏幕底部对齐的表单。在 Android 上,当单击输入字段时,键盘会向上推动整个页面,这样您就无法再看到您正在输入的字段。iOS 键盘显然会在页面顶部打开,并且不会导致这个问题。
  • 那你为什么不添加一个 margin-bottom 或 padding-bottom 来解决这个问题?

标签: javascript android ruby-on-rails html css


【解决方案1】:

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

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

阅读this StackOverflow 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 用于安卓检测
猜你喜欢
  • 2012-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-26
  • 2015-04-16
  • 1970-01-01
  • 1970-01-01
  • 2012-05-19
相关资源
最近更新 更多