响应式设计中块的更改顺序不适用于智能手机？

Question

我正在试图弄清楚当我编写第一个（！）响应式网站时遇到的一些谜题。

在移动版本中，我设置了媒体查询，以便“nav”元素在页脚之前向下移动 - 而在大屏幕上，它通常在标题之后设置。

我像这样使用flexbox

#layout {
  display: flex;
  flex-direction: column;
} 

和指定的订单3到页脚和2到导航 - 在我的电脑上，调整浏览器的大小，它工作黄金。

但是，当我在我的智能手机（iPhone3，运行Safari）上测试时，它完全忽略了指令？ 有什么方法可以让我在移动设备上工作，而不仅仅是低分辨率？

Answer 1

 @media all and (max-width: 480px) { #layout { display: flex; flex-direction: column; } .footer { order: 3; } .nav { order: 2; } } 

 <div id="layout"> <header style="background-color:red; width:100%; height:100px;">Placeholder</header> <nav class="nav">This is where navbar will go</nav> <section style="background-color:black; width:80%; height:100px;"></section> <footer class="footer" style="background-color:blue; width:100%">This is the footer</footer> </div> 

这是一个例子。 如果我在计算机上调整浏览器的大小，导航器会向下滚动到页脚正上方。 但是在我的手机上由于某种原因它会在标题后保持正确???

Answer 2

问题可能与Safari浏览器需要-webkit-前缀的某些css规则有关。 你能试一试吗：

.element {order: 1; -webkit-order: 1;}

Answer 3

 @media all and (max-width: 480px) { #layout { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .footer { order: 3; -webkit-order:3; } .nav { order: 2; -webkit-order:2; } } 

 <div id="layout"> <header style="background-color:red; width:100%; height:100px;">Placeholder</header> <nav class="nav">This is where navbar will go</nav> <section style="background-color:black; width:80%; height:100px;"></section> <footer class="footer" style="background-color:blue; width:100%">This is the footer</footer> </div> 

这是我现在拥有的新代码 - 但是Safari仍然无法读取它并在任何分辨率的标题下显示导航:(