如何实现手机分屏，但宽度却是屏幕大小的两倍？

<div class="container">
  <div class="screen left-screen">
    <!-- 左屏内容 -->
  </div>
  <div class="screen right-screen">
    <!-- 右屏内容 -->
  </div>
</div>

.container {
  width: 200%; /* 宽度为屏幕宽度的两倍 */
  overflow: hidden; /* 隐藏容器外部的内容 */
}

.screen {
  width: 50%; /* 每个屏幕宽度为容器宽度的一半 */
  float: left; /* 左右浮动，实现分屏效果 */
}

.left-screen {
  background-color: #f1f1f1; /* 左屏背景色 */
}

.right-screen {
  background-color: #e1e1e1; /* 右屏背景色 */
}

// 获取容器元素
var container = document.querySelector('.container');

// 监听屏幕宽度变化事件
window.addEventListener('resize', function() {
  // 更新容器宽度为屏幕宽度的两倍
  container.style.width = window.innerWidth * 2 + 'px';
});

// 初始化时设置容器宽度为屏幕宽度的两倍
container.style.width = window.innerWidth * 2 + 'px';