【发布时间】：2016-08-05 14:15:36
【问题描述】：
我正在尝试使用 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 布局不启动，从远处看像桌面布局
- 引导导航栏不折叠 - 看起来像桌面导航栏
知道如何解决这个问题吗？
【问题讨论】：
-
使用 % 和视口设备宽度
-
@Jonasw 谢谢你，太棒了！我现在只有移动设备上的导航栏有问题，但我想我可以解决。
-
不用担心 :) 因为我还是新手，需要赢得声誉，请将我的答案标记为解决方案
-
我会将其标记为解决方案，但您将其发布为评论，因此无法将评论标记为解决方案。如果您将其重新发布为答案，我肯定会:)
标签： html css twitter-bootstrap mobile