如何实现移动拆分屏幕，但宽度是屏幕大小的两倍？

Question

我想创建一个“分屏”移动网站，但可以左右滚动。我认为这张图片可以很好地概括出它：

Here's an image I sketched about the result I want.

我使用CSS尝试了几种方法，但是总是以某种方式失败。 width: 200%的作用远远超过屏幕宽度的两倍，视口始终将大小固定在屏幕上。我想，应该没有那么难。您有什么想法可以实现这一目标吗？预先感谢！

Answer 1

尝试使用width: 200vw; 这可能会解决您的问题

此示例可以帮助您理解

.inner {
  display: inline-block;
  width: 200vw;
}
.outer {
  overflow-x: auto;
}
span {
  float: left;
  display: inline-block;
  background-color: #00ff00;
  width: 50%;
}
p {
  float: left;
  display: inline-block;
  background-color: #ff00ff;
  width: 50%;
}

<div class="outer">
  <div class="inner">
    <span>
      hello
    </span>
    <p>hello there</p>
  </div>
</div>