如何在 html 中获取用户设备的高度

Question

如何找到用户设备的高度以优化元素的高度？

以下是我的css

section.sr {
    margin:0;
    padding:0;
    background-image:  url(../images/simulation-1-waterfall.jpg);
    margin-top: 0;
    padding: 25px 35px 30px;
    height: 100%;
}

Answer 1

section.sr {
    margin:0;
    padding:0;
    background-image:  url(../images/simulation-1-waterfall.jpg);
    margin-top: 0;
    padding: 25px 35px 30px;
    height: screen.heightpx;
}

Answer 2

把这个放在你的 html:

的头部

<meta name="viewport" content="height=device-height, initial-scale=1">

这将使 height: 100%; 成为设备的 100%。

所以如果设备是 320px，height: 100%; 就是 320px height: 50%; 将是 160px；

请记住，如果您的设备的 320px 的 <div> 设置为 height: 50%;，然后 <img> 设置为 <div>，则此嵌套图像如果设置为 height: 100%;，标签的高度将仅为 160px。因为它继承自它的父级。

Answer 3

您可以使用视口高度和宽度单位：vh 和 vw，因此 100vh 等于视口高度的 100%。

解决方法是：

section.sr {
    margin:0;
    padding:0;
    background-image:  url(../images/simulation-1-waterfall.jpg);
    margin-top: 0;
    padding: 25px 35px 30px;
    height: 100vh;
}

如何在 html 中获取用户设备的高度

how to get the height of a user's device in html

html

css

height

device

viewport