<分区>
我正在尝试使用 Bootstrap 制作水平滚动网站。它在台式机上看起来不错，但我在移动设备上遇到了大问题。代码简化:
HTML:
<body>
<section id="one">
stuff here
</section>
<section id="two">
stuff here
</section>
<section id="three">
stuff here
</section>
<section id="four">
stuff here
</section>
</body>
CSS:
body {width:400vw;height:100vh;}
section {100vw;float:left;height:100vh}
现在，如果我这样做:
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
在 iPhone 5(可能还有其他手机)上，所有部分都显示在一个页面上，每个部分占页面的 25%，Bootstrap 固定导航栏也只占屏幕的 25%(但折叠 - 它具有移动外观)。
另一方面，这段代码:
<meta name="viewport" content="width=device-width, initial-scale=0.25,maximum-scale=0.25">
每个部分都很好地适合屏幕，页面像它应该的那样水平滚动，但是:
- 一切都很小——字体、图片等。
- Bootstrap col-sm、col-xs 布局没有启动，从远处看就像桌面布局
- Bootstrap 导航栏不会折叠 - 看起来像桌面导航栏
知道如何解决这个问题吗？