iPad布局在从竖屏旋转到横屏时会放大。

Question

iPad布局在从竖屏旋转到横屏时会放大。

62

我已经添加了 "viewport" 的元标签 "width=device-width,initial-scale=1.0", 在iPad上，页面在横向模式下加载正常，然后很好地切换到纵向模式。但是，当我将其旋转回横向时，它会将页面缩放并且我必须通过捏合缩放将其缩放回1比例。

我可以通过添加 "maximum-scale=1.0, user-scalable=no" 来解决这个问题，但我想知道是否有一种方法可以在不剥夺用户缩放页面的能力的情况下解决这个问题。

如果你有任何建议，我很乐意听取，
谢谢！

- Victor Ionescu

140%的工作还是100%的工作？ - PKHunter

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- puchu · Answer 1

转换为元数据：

%meta{content: "width=device-width, initial-scale=1.0, minimum-scale=0.25, maximum-scale=1.6, user-scalable=yes", name: "viewport"}

到全局脚本：

if navigator.platform.toLowerCase() is "ipad"
  viewport = $ "meta[name='viewport']"
  viewport_content = viewport.attr("content")

  # reset initial zoom
  viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"
  setTimeout =>
    viewport.attr "content", viewport_content
  , 0

  # reset zoom on rotate
  timeout = null
  window.onorientationchange = ->
    clearTimeout timeout if timeout?
    viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"
    timeout = setTimeout =>
      viewport.attr "content", viewport_content
    , 1000