使用 Foundation 4 进行移动布局答案

【问题标题】：Mobile Layout with Foundation 4使用 Foundation 4 进行移动布局
【发布时间】：2013-09-22 13:29:44
【问题描述】：

我刚开始使用 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，我只看到了全尺寸桌面布局的缩小版

【问题讨论】：

标签： css html responsive-design zurb-foundation

【解决方案1】：

您需要包含viewport 元标记。

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

例如

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

这应该可以解决它。

【讨论】：

哇，非常感谢，尝试了很多不同的东西，就是这么简单！