为什么这个flexbox页脚不能在移动设备上运行？

Question

我正在练习使用flexbox来构建页脚。我现在建立的页脚在桌面上按预期工作，但在移动设备上却没有。

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

当我在桌面上调整页脚大小时，此媒体查询可以正常工作，并且从列布局到行的转换非常流畅：

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

但是，如果在移动设备上进行检查，则页脚内容会保持连续。我不明白为什么会这样做。在移动设备上，页脚应该在列中，因为850px下的屏幕将运行原始弹性流，该灵活流设置为列布局：

.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">

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

Answer 2

因为属性显示：flex与某些浏览器和移动设备不兼容，请尝试使用autoprefixer。