css - Foundation 4 的移动布局

Question

我刚开始使用 zurb foundation 4 作为移动优先应用程序原型(prototype)。我正在使用 Jade，我的 div 是这样排列的。

        div.large-3.small-12.columns
            <a href="#" class="button sendEmail">Send Email</a>
        div.large-6.small-9.columns 
            #list
        div.large-3.small-3.columns 
            div.Success.Label.cover Healtiest
            div.Regular.Label.cover Medium Health
            div.Alert.Label.cover Unhealty
            div.Secondary.Label.cover No Rating

到目前为止，我的应用程序在桌面上是响应式的，换句话说，如果我将浏览器窗口变小，当我的浏览器窗口大小为 768 像素时，第一个 div 将位于以下两个 div 之上。我希望在手机上也能发生同样的事情，但到目前为止，我已经尝试使用我的 Iphone 5，但我只看到了我的全尺寸桌面布局的缩小版本

Answer 1

您需要包含 viewport 元标记。

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

例如

<meta name="viewport" content="width=device-width">

这应该可以解决问题。