如果宽度大于屏幕尺寸，iOS/Android 上的高度也会改变（约束问题）
Posted
技术标签:
【中文标题】如果宽度大于屏幕尺寸，iOS/Android 上的高度也会改变（约束问题）【英文标题】：If width is larger than the screen size, height is changed too on iOS/Android (Constraint Issue) 【发布时间】：2021-12-19 14:11:07 【问题描述】：我在 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>
【问题讨论】：
【参考方案1】：我自己为这篇文章找到了解决方案。
我所要做的只是设置以下元标记。 如果你需要做这样的事情，height=device-height 似乎是关键！希望这篇文章对人们有所帮助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 上的高度也会改变（约束问题）的主要内容，如果未能解决你的问题，请参考以下文章