Медиа-запрос не работает на устройствах

Question

Я пытаюсь применить медиа-запросы к шаблону блоггера.

@media all and (max-width: 600px)
  { 
     //styling here
  }

Это прекрасно работает в настольных браузерах, когда я изменяю размер окна. Однако, когда я тестирую его на мобильных устройствах (Android, iPhone), он не работает и показывает версию для ПК. Я посмотрел эту статью, но ничего не помогает.

Answer 1

Вы указываете viewport в html. Вам нужно это для того, чтобы стили отображались.

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

Вы можете прочитать об этом здесь: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Answer 2

Если вы используете любой другой iPhone, кроме оригинала, ширина составляет 640 пикселей. И большинство Android-телефонов в эти дни есть, если не больше. Так что ваши max-width: 600px запрос слишком узок для применения к любому из этих телефонов.

Вы можете исправить это, увеличив max-width параметр для исключения рабочих столов при включении телефонов. Принимая ширину Twitter Bootstrap для мобильных устройств, вы должны попробовать max-width: 767px,

Answer 3

Кажется, что в данный момент код, который вы упоминаете, не существует и имеет скрытую ось y. Если это вообще так, то есть только 1. Вам нужно иметь больше медиа-запросов для меньшей ширины. Сайт blogspot(это собственный домен, поэтому он не имеет.blogspot), он имеет много медиа-запросов для гораздо меньшей ширины и различной ширины.

Задавать max-width а также max-height для различных элементов в медиа-запросах для меньшей ширины, и вы обязательно должны увидеть, как это работает.

Просто совет: для тестирования вам не нужно открывать свой сайт в Android / IOS, просто измените размер окна на рабочем столе или вам этот сайт.