CSS: 200 view单元不使用移动视图

Question

我试图在两个div之间做一个水平幻灯片，下面是html：

<div id="container">
  <div class="viewport-1">
    <div class="inner-div">
      <h1>Viewport background 1</h1></div>
  </div>
  <div class="viewport-2">
    <div class="inner-div">
      <h1>Viewport background 2</h1></div>
  </div>
</div>

我尝试将容器200 at放在容器100 at内，每个div在桌面视图上工作良好，但在移动平台上根本不工作。

钢笔

Answer 1

视口标签呢？希望能帮上忙

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

Answer 2

CSS单元vh和vw还没有得到广泛的支持--许多浏览器根本不支持它，这很可能是您的代码无法在您正在测试的手机上运行的原因。相反，您应该使用区域和百分比。您可以在我的叉中看到这方面的一个例子：http://codepen.io/kvackkvack/pen/mVOePa。我改变了以下几点：

#container {
   ...
   /* (old version) width: 200vh; */
   width: 200rem;
   position: absolute;
   left: 0; top: 0; bottom: 0;
   ...
}
.viewport-1, .viewport-2 {
  /* (old version) width: 100vh;
  height: 100vh; */
  width: 100rem;
  height: 100%;
}

请注意，虽然百分比与vw和vh非常相似，但实际上是整个页面(即使页面是屏幕大小的两倍和可滚动的)，而vw和vh总是屏幕大小的百分之一，如果您打算使用它，我建议使用"rem"，这基本上是vh的复制。在https://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/可以看到更多关于它的信息。

Answer 3

看来，您试图使用的浏览器移动设备不支持它。

除了使用大众的单位，也使用百分比，这样你有一些备份，以防浏览器不支持它。