Div高度将无法适应不同的手机屏幕高度

Question

我有一个手机网站。 该页面分为几部分，每个section占据整个可见页面的高度和宽度。 （高度的93％）

您完成了一个部分的编辑，向下滚动到下一个再次覆盖全屏的部分。

每个部分都是div。

.section{
  background-color: lightblue;
  background-repeat: no-repeat;
  background-size: cover;
  width:100vw;
  height: 93vh;
  padding-top: 1px;

}

当我在计算机上使用Chrome窗口播放并水平拖动以查看页面如何适合不同的移动屏幕时，section height保持相同，因此当窗口足够宽时，部分中的内容将使该部分溢出到下一个部分，高度不会增加。

我认为是因为我的计算机屏幕的高度保持不变（？） 如何检查section高度在不同的移动屏幕高度中是否发生了变化？

Answer 1

以下是CSS的一些更改。通过它，它将为您工作：-

    .section{
  background-color: lightblue;
  background-repeat: no-repeat;
  background-size: cover;
  width:100vw;height:auto;
  min-height: 93vh;
  padding-top: 1px;

}

Answer 2

只需为桌面设计页面并添加voewport元标记。

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

这将自动缩放页面宽度以适合移动设备的屏幕宽度。

Answer 3

设置最小高度而不是高度，您可以使用chrome DevTools检查应用程序中不同类型的设备。 从DevTools中选择Toggle设备工具栏，然后可以选择其他类型的手机，也可以与自适应游戏一起玩。