Хром-эмулятор не активирует медиа-запросы

Question

Я создаю HTML-адрес электронной почты и использую эмулятор Chrome для тестирования реагирующих состояний, но теперь эмулятор не запускает медиа-запрос.

@media only screen and (max-device-width: 480px) 

Любые мысли?

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

EDIT Проблема связана с удалением видовых мета-тег, но это рекомендуется удалить из реагирующих писем ... Кто-нибудь знает решение для этого?

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

Answer 1

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

@media only screen and (max-width: 480px) 

max-width лучше, чем max-device-width из-за нескольких причин. Первичным является то, что для запуска некоторых телефонов Android, если вы использовали max-device-width, вам нужно было установить его горизонтальное разрешение (1920 пикселей на некоторых телефонах на ландшафт!), В то время как max-width должен был быть установлен на ширину видового экрана (около 480 пикселей). На iPhone оба те же, что и в прошлый раз, я проверил.

Лучше всего использовать max-width в запросах по электронной почте.

Кроме того, вам не нужно ставить 480px, я стараюсь устанавливать более высокие значения, либо 580px, либо на 1px меньше, чем ширина внешнего контейнера.