Question

我试图使用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导航栏不会崩溃 - 看起来像桌面导航栏

知道如何解决这个问题吗？

Answer 1

由于使用不同的浏览器vw并不可靠，因此请使用％。正常使用width = device-width和css font-size to＆＃34; zoom＆＃34;

手机上的横向网站 - 什么视口？

1 个答案: