Html 为什么'；这个flexbox页脚不能在移动设备上使用吗？

我正在练习使用flexbox构建页脚。我目前正在构建的页脚在桌面上正常工作，但在移动设备上却无法正常工作

这是：

当我在桌面上调整页脚大小时，此媒体查询起作用，并且从列布局到行的转换是流动的：

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

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

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

我认为问题与页脚没有正确收缩有关。手机上的页脚宽度是980px，所以我可以理解为什么它仍然排成一行，但究竟为什么它这么宽？为什么它的收缩方式与在桌面窗口中调整大小时的收缩方式不同

---

任何帮助都将不胜感激

由于property display:flex与某些浏览器和移动设备不兼容，请尝试使用autoprefixer。

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

---

我认为你的标题中缺少了这个元标记。手机很小并不意味着它的像素比显示器少，实际上有些甚至比显示器多。

是的，就是这样！非常感谢你！因此，我认为这一行代码必须包含在任何移动友好网站中。我会再仔细研究一下。没问题。如果你认为我的答案解决了你的问题，那就太好了：）