html - 为什么这个 flexbox 页脚不能在移动设备上工作？

Question

我正在练习使用 flexbox 构建页脚。我目前正在构建的页脚在桌面上按预期工作，但在移动设备上却不行。

这是:http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/

当我在桌面上调整页脚大小时，此媒体查询有效并且从列布局到行的过渡是流畅的:

@media (min-width: 850px) {
.footer {
display: flex;
padding: 10px;
flex-flow: row;
}  

但是，如果在移动设备上进行检查，页脚内容会保留在一行中。我不明白为什么要这样做。在移动设备上，页脚应该在一列中，因为 850 像素以下的屏幕将运行原始的 flex-flow，它被设置为列布局:

.footer {
display: flex;
padding: 10px;
flex-flow: column;
justify-content: center;
}

我认为问题与页脚未正确收缩有关。手机上页脚的宽度是 980px，所以我明白为什么它仍然排成一排，但到底为什么这么宽？为什么它不像在桌面窗口中调整大小时那样缩小？

如有任何帮助，我们将不胜感激!

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我认为您的 header 中缺少此元标记。仅仅因为手机很小并不意味着它的像素比显示器少——实际上有些甚至更多。