@media не работает на всех устройствах

Question

Я недавно развернул сайт infortion.com .Кажется, все работает нормально, примите к сведению, что некоторые пользователи сообщили, что веб-сайт не просматривается должным образом на их мобильных устройствах!Кроме того, они прислали мне скриншоты, которые ясно показывают, что теги @media не работают на их телефоне.

Я попытался открыть его из нескольких браузеров на своем мобильном телефоне (gionee P5W - android 6), и он работает нормально, ноне для них.

Вот метатег,

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

Вот структура CSS-файла для небольших устройств,

@media all and (min-width:321px) and (max-width:480px){
# CSS
} 

@media all and (min-width:0px) and (max-width:320px){
 # CSS
}

Как мы можем решить эту проблему?Благодарю вас .,.

Answer 1

Попробуйте использовать ваш медиа-запрос следующим образом:

@media screen (max-width: 320px){
 # CSS
}

Он будет нацелен на любой экран (и любое устройство) с max-width из 320px.Поскольку установлен max-width, это означает, что все, что находится под 320px, также нацелено, поэтому добавление min-width будет избыточным.

Метатег верен и не должен вызывать проблем.

Дайте мне знать, как это работает, и если возникнут какие-либо проблемы, предоставьте несколько скриншотов.