Question

我有一个网络应用程序，我试图在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，其他答案是提供一个视口元标记，我已经在做了。有人能指点我这里的解决方案吗？

Answer 1

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

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

我会very careful with maximum-scale or anything restricting user's zooming因为它会迫使用户感到不舒服的小（或大）文字。

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">

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

2 个答案: