Почему «ширина устройства» не работает в Chrome для Android?

Question

Я ссылаюсь на это руководство о том, как " сделать веб-сайт удобным для мобильных устройств. " Похоже, что оно не действует на моем браузере Chrome для Android.

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

Я добавил это к своим статическим файлам Django в app.css, и он определенно находится на веб-сайте, потому что я могу видеть это с помощью Chrome Developer Tools на моем ноутбуке.Однако, когда я использую свой телефон Android (Galaxy S8, если это имеет значение), он не помещается на экран.

У меня также есть в моем base.html, который использует весь мой сайт:

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

Некоторые дополнительные вопросы: Нужно ли очищать кэш на моем телефоне?Как я могу использовать Chrome Developer Tools на своем телефоне для проверки CSS веб-сайта?

Answer 1

Из того, что я понимаю, это всего лишь замена на основе CSS для следующего метатега HTML:

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

Я бы предложил использовать вышеуказанный метатег в вашем index.html Кроме того, вы все равно будете это делать.необходимо добавить @media запросов, чтобы на самом деле реагировать на различные размеры экрана.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px)  ... 

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px)  ... 

// Medium devices (tablets, less than 992px)
@media (max-width: 991px)  ...

В дополнение к указанным выше точкам останова на основе PX вы также можете использовать точки останова на основе DPI: https://css -tricks.com / snippets / css / retina-display-media-query/

Но чтобы ответить на ваш вопрос об удаленной консоли отладки, я не знаю ничего о том, что работает, а также о инструментах Chrome Developer для мобильных устройств (Ctrl + Shift + M)

Answer 2

используйте <meta name="viewport" content="width=device-width, initial-scale=1.0">.