Очень простой медиа-запрос не работает на мобильном - PullRequest
Новая
       16

Очень простой медиа-запрос не работает на мобильном

0 голосов
/ 21 апреля 2019

Это поставило меня в тупик.Это отлично работает в браузерах (проверено Chrome, Firefox и Safari), но не работает в эмуляторе Chrome, мобильном Chrome или мобильном Firefox. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta title="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    div {
      width: 50%;
      float: left;
    }

    @media screen and (max-width: 500px) {
      div {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div>Left</div>
  <div>Right</div>
</body>
</html>

Моя первоначальная проблема была более сложной, но даже кипящейэто до самой простой формы, это не работает.Попробовал вышеописанное с различными комбинациями, такими как display: inline-block; вместо float: left;, различными метатегами области просмотра, добавлением only screen к медиа-запросу, другими тегами, отличными от div s и т. Д.

Мой оригиналПроблема возникла при работе с Web Components + ShadowDOM, но, похоже, она не связана с ними.Удостоверьтесь, что все мои кеши были уничтожены во время тестирования.

Я схожу с ума?

1 Ответ

1 голос
/ 21 апреля 2019

Ого, я тупой. Была опечатка в метатеге. Должно быть name вместо title: 

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