移动 Safari - 视口设备高度未按预期工作答案

【问题标题】：Mobile Safari - viewport device-height not working as expected移动 Safari - 视口设备高度未按预期工作
【发布时间】：2014-07-20 17:06:13
【问题描述】：

我有一个网络应用程序，我试图在 iPad 3 上运行。当我将其拉起时，该应用程序允许在不应该的情况下进行垂直滚动。我已经完成了与其他网络应用程序相同的过程，没有任何问题，但我不确定这次我错过了什么。

在我的 html 的 head 元素中，我有以下元标记：

    <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

搜索 SO，其他答案是提供一个视口元标记，我已经在这样做了。有人可以在这里指出我的解决方案吗？

【问题讨论】：

你试过overflow:hidden!important;吗？

标签： html ios css mobile-safari viewport

【解决方案1】：

在我看来，您使用了太多viewport 的属性，这些属性可能会相互冲突。 Apple suggests 设置其中的几个或一个并单独测试，因为其他的是自动推断的。

Bootstrap in its basic template 建议只设置width 和initial-scale。

我会选择very careful with maximum-scale or anything restricting user's zooming，因为它会迫使用户输入令人不舒服的小（或大）文本。

【讨论】：

我通常会同意最大规模，但对于我想要完成的事情来说这是必要的。该网络应用程序的外观和行为应该类似于用于演示的交互式车辆信息娱乐系统。对于我们正在向其展示的人来说，放大是出乎意料的和不和谐的。
为什么不让用户决定缩放呢？如果他们不喜欢它，他们可以随时缩小。

【解决方案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">

【讨论】：