时间戳

首页 > 解决方案 > 如果宽度大于屏幕尺寸，iOS/Android 上的高度也会改变（约束问题）

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

问题描述

我在 body 中有一个元素，它比屏幕尺寸大。我限制了身体的高度，所以我认为只会改变身体的宽度。但是，在移动设备上，如果您将宽度更改为大于屏幕宽度，则高度也会更改..

我想保持原来的身高（100%）。有没有办法保持高度？

↓如你所见，高度很奇怪.. Chrome Dev Tool 图片

这是我的代码。

<!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>

标签： javascriptandroidhtmlcssmobile

解决方案

我自己找到了这篇文章的解决方案。

我所要做的只是设置以下元标记。 如果你需要做这样的事情， height=device-height似乎是关键！希望这篇文章能帮助像我这样的人......（^o^）

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

推荐阅读