Meta Viewport标签和设备方向

Question

我有这个元标记......

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

我的应用程序绝对定位于0 0 0 0，所有内容都滚动到内部。我有两个固定的栏，页眉和页脚，所以我包含内容高度很重要。

现在考虑用户更改设备方向。内容的高度现在是设备的宽度，但元标记不会更改。所以现在我的页脚栏将不可见。

做什么？

Answer 1

您必须通过orientationchange上的JavaScript手动更改大小。有关详细信息，请参阅Mobile Safari device-width/height orientationchange bug。

这是来自博客文章：

window.addEventListener('orientationchange', function() {
  document.querySelector('html').style.width = window.innerWidth + 'px'
}, false)

上面的链接还包含一个jQuery版本，如果这是您选择的库。