如果宽度大于屏幕尺寸，高度也会在 iOS/Android 上改变（约束问题）

Question

我在 body 中有一个元素，它 比屏幕尺寸大 。我限制了body的height，所以我以为只会改变body的宽度。然而，在移动设备上，如果你改变宽度大于屏幕宽度，高度也会改变..

我想保持原来的身高(100%)。有没有办法保持身高？

↓如你所见，身高很奇怪.. Chrome Dev Tool picture

这是我的代码。

<!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 {
        max-height: 100%;
    }
    #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>

Answer 1

我自己找到了这个 post 的解决方案。

我所要做的只是设置以下元标记。 height=device-height 好像是关键，如果你需要做这样的事情！希望这个 post 可以帮助人们 like me... (^o^)

<meta name="viewport" content="height=device-height,width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

如果宽度大于屏幕尺寸，高度也会在 iOS/Android 上改变（约束问题）

If width is larger than the screen size, height is changed too on iOS/Android (Constraint Issue)

html

javascript

css

mobile

android