2

我刚开始使用 zurb Foundation 4，作为移动优先的应用程序原型。我正在使用 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，我只看到了全尺寸桌面布局的缩小版本

全尺寸桌面

768 像素桌面

移动的

4

1 回答 1

4

您需要包含viewport元标记。

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

例如

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

那应该解决它。

于 2013-09-18T00:07:24.097 回答