为什么这个 flexbox 页脚不能在移动设备上工作？
Why doesn't this flexbox footer work on a mobile device?
我正在练习使用 flexbox 构建页脚。我目前正在构建的页脚在桌面上按预期工作，但在移动设备上却不行。
这里是：http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/
当我在桌面上调整页脚大小时，此媒体查询有效并且从列布局到行的过渡是流畅的：
@media (min-width: 850px) {
.footer {
display: flex;
padding: 10px;
flex-flow: row;
}
但是，如果在移动设备上进行检查，页脚内容会保留在一行中。我不明白为什么要这样做。在移动设备上，页脚应该在一列中，因为 850px 以下的屏幕将 运行 原始的 flex-flow，它被设置为列布局：
.footer {
display: flex;
padding: 10px;
flex-flow: column;
justify-content: center;
}
我认为问题与页脚未正确收缩有关。手机上页脚的宽度是 980px，所以我明白为什么它仍然排成一排，但到底为什么这么宽？为什么它不像在桌面上调整大小时那样缩小 window？
如有任何帮助，我们将不胜感激！
因为属性 display: flex 与某些浏览器和移动设备不兼容，请尝试使用 autoprefixer。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我认为您在 header 中遗漏了这个元标记。仅仅因为手机 phone 小并不意味着它的像素比显示器少，实际上有些甚至更多。
我正在练习使用 flexbox 构建页脚。我目前正在构建的页脚在桌面上按预期工作，但在移动设备上却不行。
这里是：http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/
当我在桌面上调整页脚大小时，此媒体查询有效并且从列布局到行的过渡是流畅的：
@media (min-width: 850px) {
.footer {
display: flex;
padding: 10px;
flex-flow: row;
}
但是，如果在移动设备上进行检查，页脚内容会保留在一行中。我不明白为什么要这样做。在移动设备上，页脚应该在一列中，因为 850px 以下的屏幕将 运行 原始的 flex-flow，它被设置为列布局：
.footer {
display: flex;
padding: 10px;
flex-flow: column;
justify-content: center;
}
我认为问题与页脚未正确收缩有关。手机上页脚的宽度是 980px，所以我明白为什么它仍然排成一排，但到底为什么这么宽？为什么它不像在桌面上调整大小时那样缩小 window？
如有任何帮助，我们将不胜感激！
因为属性 display: flex 与某些浏览器和移动设备不兼容，请尝试使用 autoprefixer。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我认为您在 header 中遗漏了这个元标记。仅仅因为手机 phone 小并不意味着它的像素比显示器少，实际上有些甚至更多。