iOS/Android端元素宽度超屏时body高度异常，如何维持100%原高度？

移动端浏览器存在自动适配超宽内容的逻辑：当页面内出现大于当前视口宽度的元素时，浏览器会默认缩放整个页面来容纳全部内容，这会导致实际渲染的视口高度随缩放比例变化。仅给html、body设置max-height: 100%无法生效，因为百分比高度的父元素基准值已经被撑开。

直接修改html、body的样式，用视口单位固定高度，同时限制溢出规则即可：

• 用vw/vh单位直接绑定视口的宽高，避免父元素基准值变化的影响
• 明确设置overflow-x控制横向内容的展示逻辑，overflow-y禁止纵向内容撑高容器

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
<style>
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    body, html {
        /* 用视口单位固定宽高，不受内容尺寸影响 */
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        /* 保留横向滚动能力，不需要滚动就改为hidden */
        overflow-x: auto;
        /* 禁止纵向溢出，避免高度被撑开，需要纵向滚动可改为auto */
        overflow-y: hidden;
    }
    #el {
        width:2100px;
        color:red;
        border:2px solid red;
    }
</style>
</head>

<body>
<div id="el">aaaa</div>
<script>
    document.getElementById('el').innerHTML = window.innerWidth + '<br>' + window.innerHeight
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Exis