移动版Safari - 视口设备高度不如预期工作

Question

我有一个Web应用程序，我正在尝试在iPad 3上运行。当我打开它时，该应用程序允许垂直滚动，而不应该这样做。我已经使用其他Web应用程序进行了相同的过程，没有任何问题，并且不确定这次我错过了什么。

在我的HTML的head元素中，我有以下meta标签：

    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
    <meta name="apple-mobile-web-app-capable" content="yes">

在我的 CSS 中：

    html, body { width: 100%; height: 100%; overflow: hidden; }

尝试在weinre中调试此问题，发现文档的宽度和高度不知何故相等，而在横向时高度应该要小得多。

    $(document).width();  // returns 1024
    $(document).height(); // returns 1024

在Stack Overflow上搜索，其他答案已经提供了视口(meta viewport)标记的解决方案，而我已经在使用。有人能指点我一个解决方案吗？

- Danny

---

你尝试过使用 overflow:hidden!important; 吗？ - Panoply

Answer 1

我看你使用了太多可能会相互冲突的viewport属性。苹果建议只设置少量或一个并在隔离中进行测试，因为其他属性会自动推断。

Bootstrap在其基本模板中建议仅设置width和initial-scale。

对于限制用户缩放的任何内容，例如maximum-scale, 我会非常小心，因为它会强制用户进入不舒适的小（或大）文本。

- Dmitri Zaitsev

---

我通常会同意最大比例的观点，但这对于我想要实现的目标是必要的。这个Web应用程序应该看起来和行为像一个互动式车辆信息娱乐系统的演示。放大会让我们展示给别人感到意外和不适。 - Danny

为什么不让用户决定缩放呢？如果他们不喜欢，他们总是可以缩回去。 - Dmitri Zaitsev

Answer 2

好的，出于某种原因，当我从视口元标记中删除"height=device-height"时，它起作用了。不确定为什么，因为我只是从另一个运行正常的应用程序中复制并粘贴了这个标记。工作的视口：

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

- Danny