Почему этот нижний колонтитул flexbox не работает на мобильном устройстве?

Question

Я использую flexbox для создания нижних колонтитулов. Нижний колонтитул, который я создаю на данный момент, работает, как ожидалось, на рабочем столе, но не на мобильном устройстве.

Здесь: http://codepen.io/FullMetalAlchemist3/pen/bwzEYL/

При изменении размера колонтитула на рабочем столе этот медиа-запрос работает и переход от макета колонки к ряду жидкость:

@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; 
} 

Я думаю, что эта проблема имеет что-то делать с колонтитула не сжимается правильно. Ширина нижнего колонтитула на мобильном телефоне составляет 980 пикселей, поэтому я могу понять, почему он все еще в ряду, но почему он так широк? Почему он не сжимается так же, как при изменении размера в окне рабочего стола?

Любая помощь была бы принята с благодарностью!

Answer 1

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

Я думаю, вам не хватает этого метатега в вашем заголовке. Просто потому, что мобильный телефон небольшой, это не значит, что у него меньше пикселей, чем у монитора, на самом деле у некоторых даже больше.

Answer 2

потому что отображение свойств: flex несовместим с некоторыми браузерами и мобильными устройствами, попробуйте с помощью autoprefixer.