Возможные причины, по которым мобильный браузер работает иначе, чем браузер ПК в уменьшенном масштабе?

ЦЕЛЬ:
Стилизовать интерфейс чата на мобильных устройствах.

ПРОБЛЕМА.
Я собрал экспериментальную версию чат-бота. Все очень просто, включая JS и CSS. Хотя у меня также есть отдельная проблема с JS (я думаю), это моя проблема с CSS.

Во время разработки я тестировал в FF и Chrome и уменьшал размеры браузеров, чтобы имитировать работу мобильного браузера.
Все медиа-запросы CSS действовали, как ожидалось.

Тем не менее ... на любом мобильном устройстве, которое мы тестируем, размер, указанный в медиа-запросах CSS, не действует, и нам остается увеличивать масштаб.

ПРИМЕР:
temp.mosaranch.com/chatbot-tester

ВОПРОС:
Почему мобильные браузеры могут не обрабатывать определенные правила CSS для медиа-запросов, а правила применяются при уменьшении масштаба в браузере настольного компьютера?


person mOrloff    schedule 26.09.2017    source источник
comment
О каких браузерах мы здесь говорим? Например, Safari на iOS (к сожалению для нас) должен вести себя немного иначе, чем Chrome на рабочем столе.   -  person stybl    schedule 26.09.2017


Ответы (1)


Для правильной работы мультимедийных запросов на мобильных устройствах необходим метатег области просмотра.

Подробнее читайте на MDN:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Типичный сайт, оптимизированный для мобильных устройств, содержит что-то вроде следующего:
<meta name="viewport" content="width=device-width, initial-scale=1">

person Jon Uleis    schedule 26.09.2017
comment
Бинго! Вот и все. - person mOrloff; 27.09.2017