1PeGaS
@1PeGaS

Почему в режиме эмуляции мобильных устройств в chrome или mozilla едет вёрстка?

Почему в режиме эмуляции мобильных устройств в chrome или mozilla едет вёрстка когда сужаешь экран, хотя сайт адаптирован и если просто сужать окно браузера без этого режима то всё нормально?

Вот например: as-praktika.dev-parus.ru
Криво отображаются иконки меню и телефона (они огромные) на экранах размеров примерно 1199-1185px и весь хэдэр "едет""

А если просто сузить окно то всё норм
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
У вас в main.js есть скрипт, который при ширине экрана 1185px и выше немного меняет верстку (добавляет svg и т.д.). А в CSS-файле правила для этих элементов срабатывают только при ширине экрана 1200px и выше. Поэтому решения 2:
1. в css-файле заменить участки кода вида:
@media (min-width: 1200px) {
    .services__list-menu,.services__profile {
        display:none
    }
}

на
@media (min-width: 1185px) {
    .services__list-menu,.services__profile {
        display:none
    }
}

(для остальных неправильно работающих элементов тоже нужно заменить значение min-width с 1200 на 1185)

2. в js-файле main.js (что лежит в шаблоне) найти и заменить совпадение "1185" на "1200". Но это более костыльный вариант, т.к. с этим значением работает целый плагин.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@uKrylova
Видимо на указанном проблемы не заканчиваются:
990х1189
5af02222773e4424013454.png
iPad Pro 10.5
5af0228f1e49e780119922.png
Noname
5af022e996859140074378.png

С вёрсткой явно перемудрили.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы