如何实现移动分屏，但宽度是屏幕尺寸的两倍？答案

【问题标题】：How to implement mobile split screen, but with a width of double the screen size?如何实现移动分屏，但宽度是屏幕尺寸的两倍？
【发布时间】：2019-01-10 20:17:03
【问题描述】：

我想创建一个“分屏”移动网站，但可以左右滚动。我认为这张图片总结得很好：

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

我使用 CSS 尝试了几种方法，但总是以某种方式失败。 width: 200% 使它远远超过屏幕宽度的两倍，视口始终将大小固定到屏幕上。我想，应该不会那么难。你有什么想法让这件事发生吗？提前致谢！

【问题讨论】：

标签： css mobile responsive-design

【解决方案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>

【讨论】：

谢谢！但是，this 发生了。这是我的代码：html, body { width:200vw; height: 100%; color: #000000; } .leftContent{ width: 50%; height: 100vh; float: left; background: #00babc; } .rightContent{ width: 50%; height: 100vh; float: right; color: #ffffff; background: #003f70; } 宽度和高度都以某种方式失败。
尝试在直接 div 上使用它，而不是在 body 上。而且你不应该在 HTML 标签上应用任何 CSS，这不是一个好习惯
感谢您的建议，我会牢记这一点。我做了一个 contentWrapper div 而不是在 body 上使用它，同样的情况发生了:(
尝试给它 display: inline-block;如果可能，请尝试共享更多代码，这很难预测和猜测哪里出错了。
Here 实际上是我的全部代码。在桌面上工作，但在智能手机上失败。