Question

请考虑以下页面：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html, body
        {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

将其加载到iPhone上的safari中。页面呈现100％高度。现在将iPhone转为横向并向上拖动页面。出现（底部）按钮栏，现在我们按下按钮栏偏移内容的量向上和向下滚动页面。页面高度不再是100％，应该可见的内容位于按钮栏下方，并且显示垂直滚动条。

是否有可能消除这种烦恼并获得真实 100％的身高？

Answer 1

使用此脚本将类添加到html（如果它是iPhone）：

if((navigator.userAgent.match(/iPhone/i))) {
     $('html').addClass('iphone');
}

然后尝试将其位置设置为固定，但仅适用于方向为横向时，如下所示：

@media (orientation:landscape) {
    html.iphone > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 480px !important;    /* pretty sure its 480px? */
    }
}

Answer 2

最后通过头部中的meta指令解决了这个问题，这使得底部按钮栏的外观显着降低了攻击性。注意最后一部分（minimal-ui）

<meta name="viewport" 
 content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">

由于按钮栏，景观溢出100％的身高

2 个答案: