语义网格系统，媒体查询发布

Question

我正在使用Semantic Grid System构建一个响应式站点。然而，媒体查询有些地方不太对劲，当它达到特定的屏幕尺寸时，显然应该启动它。

我将引用他们的example on the website：例如，如果我在我的iPhone上查看它，假设它应该调整为移动设备上的单个列结构，它仍然会抛出页面的web版本。在我的iPhone上，Safari和Chrome都是如此。然而，如果我使用RWD bookmarklet检查它在不同分辨率下的外观，它看起来与移动分辨率下的预期一样。此外，具有讽刺意味的是，如果我在Safari中调整了桌面上页面的大小，一旦我降到合适的屏幕尺寸，它也会相应地调整，但在Firefox中不会。

一旦达到720px，它使用的媒体查询是

@media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
    .column(12);
    margin-bottom: 1em;
}
}

我可能在这里偏离了目标，但我认为这肯定是问题所在。但考虑到这是直接来自semantic.gs网站，我不认为我有必要的专业知识来质疑他们自己的代码。

你知道问题出在哪里吗？

Answer 1

你所描述的行为可能是在你的标记中没有使用'viewport‘元标签的结果：

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

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