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

Question

[Денис]

Не работают стили на мобильных устройствах при горизонтальном просмотре, не пойму в чем дело. Только начинаю знакомство с веб, кто шарит подскажите пожалуйста.
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; не работает....там и другие стили не работают.
посмотреть можно тут

Comments

[Евгений Вольф]

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

Есть подозрение, что при горизонтальном положении устройства - его ширина не попадает в тот диапазон, для которого у Вас написаны стили и стили применяются для другой ширины.

[Денис]

Евгений Вольф, дело в том что класс slider-box скрыт до 830px включитель, неужели айфон 7 при горизонтальном просмотре имеет больше ширину? Почему тогда веб тулс показывает что все ровно?

[Евгений Вольф]

Денис, я точно не могу сказать, какая у айфона-7 ширина по горизонтали... Но, вот на моём телефоне например, разрешение 1920х1080 (физическое), хотя он масштабирует изображение конечно... Но, я думаю самый простой вариант в Вашем конкретном случае -- напишите пару строчек JS'а, который будет выводить в консоль (или в "алерт" или ещё куда) информацию о текущей ширине экрана и сами увидите.

Answer 1

[Афанасий Захаров]

Потому что вы используете 'max-device-width'
А у айфона ретина, в случае с семеркой - 667 пикселей ширина, но max-device-width - 667 * 2, и оказывается вне условий ваших медиа квери.

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

Comments

[Денис]

щас пробну

[Денис]

не нашел, там везде написано max-width мы же про meтa говорим?

[Афанасий Захаров]

Денис, my-style.css, строчка 499.

[Денис]

Афанасий Захаров, я понял! Спасибо выручил!