移动Safari-视口设备高度无法正常工作 [英] Mobile Safari - viewport device-height not working as expected

问题描述

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

I have a web app that I'm trying to run on an iPad 3. When I pull it up, the app is allowing vertical scroll when it shouldn't be. I've gone through the same process with other web apps without any issues, and am not sure what I am missing this time around.

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

Inside head element of my html, I have the following meta tags:

    <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中调试此问题，发现当高度显示要小得多(横向)时，文档的宽度和高度在某种程度上是相等的.

Trying to debug this issue in weinre and discovered that the document width and height are somehow equal, when height show be much smaller (in landscape).

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

围绕SO进行搜索，其他答案是提供一个视口元标记，这已经在做了.有人可以在这里为我指出解决方案吗?

Searching around SO, other answers have been to supply a viewport meta tag, which I'm already doing. Can someone point me to a solution here?

推荐答案

在我看来，您正在使用太多可能彼此冲突的 viewport 属性.苹果建议设置其中一个或几个，然后隔离进行测试，因为会自动推断出其他.

It looks to me like you are using too many properties of viewport that might conflict with each other. Apple suggests to set few of them or one and test in isolation as others are automatically inferred.

基本模板中的引导程序建议仅设置 width 和初始比例.

我会对 maximum-scale 非常小心，或者限制用户缩放的任何内容，因为它会迫使用户输入不舒服的小(或大)文本.

I would be very careful with maximum-scale or anything restricting user's zooming as it forces the user into uncomfortably small (or large) text.

这篇关于移动Safari-视口设备高度无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！