@Drumsid

Не применяются стили css на мобильных устройствах?

Не работают стили на мобильных устройствах при горизонтальном просмотре, не пойму в чем дело. Только начинаю знакомство с веб, кто шарит подскажите пожалуйста.
1. В веб тулсе все работает корректно.
2. На конкретном устройстве, iphone7, в вертикальном просмотре все гуд, класс slider-box имеет свойство display none, и он успешно скрыт В горизонтальном просмотре все плохо, так же прописано это правило slider-box display none но блок не пропадает. На конкретном андроид устройстве все отображается как надо и вертикально и горизонтально.
3. Файлы на хосте проверил, все правила css записаны.
4. Для теста залил на другой домен, чтоб проверить, ничего не изменилось.
5. Очистить кеш? Интересно сколько раз я уже это сделал?
6. Тестил на устройствах galaxy s7 edge, iphone 7, iphone xs, корректно только на гэлекси работает и вертикально и горизонтально. На айфонах работает только вертикально, горизонтально не хочет.
..не понимаю как такое может быть? Ладно там верстка поехала, но display: none; не работает....там и другие стили не работают.
посмотреть можно тут
  • Вопрос задан
  • 347 просмотров
Решения вопроса 1
@afanasiyz
Javascript-разработчик
Потому что вы используете 'max-device-width'
А у айфона ретина, в случае с семеркой - 667 пикселей ширина, но max-device-width - 667 * 2, и оказывается вне условий ваших медиа квери.

перепишите max-device-width на max-width, min-device-width на min-width (попробуйте), и должно все заработать
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы