Как убрать горизонтальный скролл на сайте при просмотре с iphone X в браузере Google Chrome?

[guram07]

Всем доброго времени суток.

При просмотре сайта через десктопные браузеры все элементы и экран показываются ровно соответствуя медиа запросам. Точно так же - все отображается ровно если в Chrome выбрать отображение сайта как с iPhone X c перевернутым экраном. Но если зайти на сайт с iPhone X с браузера Google Chrome, и перевернуть экран, то во первых - появляется горизонтальный скролл, во вторых - при переворачивании экрана обратно слетает полностью мобильный вид сайта. Что касается просмотра сайта через браузер Safari на iPhone X, все отображается ровно.

Прилагаю видео - экран запись с iPhone X.

Ссылка на видео - https://disk.yandex.ru/i/BI2go6yL2gtxQQ.
Ссылка на сайт - http://grillgrad.ru/

Прошу помочь кто может мне в этом вопросе. Я понимаю, что скорее всего верстка кривая где-то или где-то нарушены правила оформления через СSS.

Edited March 6, 2021 by guram07

[klierik]

Я смог воспроизвести Вашу проблему, но сказать в чем причина мне сложно. Дело в том, что дебажить такую ситуацию сложно. При данных обстоятельствах devTool недоступен. Даже в BrowserStack отсутствует отладка Chrome/iOS.

Попробуйте по-блочно прятать блоки в вёрстке пока не найдёте тот, из-за которого возникает проблема. Далее скрывайте элементы блока, что бы найти тот элемент, который некорректно влияет на отображение. Останется изучить стили и найти те, которые работают не как ожидается.

[Full-R]

Нельзя доверять режиму эмуляции смартфона. Он сильно обманывает. 

Если очень нужна консоль при работе над мобильной версией со смартфона используйте настройку логирования через ADB. 

Работать неудобно к сожалению. 

[guram07]

08.03.2021 в 14:34, klierik сказал:

Я смог воспроизвести Вашу проблему, но сказать в чем причина мне сложно. Дело в том, что дебажить такую ситуацию сложно. При данных обстоятельствах devTool недоступен. Даже в BrowserStack отсутствует отладка Chrome/iOS.

Попробуйте по-блочно прятать блоки в вёрстке пока не найдёте тот, из-за которого возникает проблема. Далее скрывайте элементы блока, что бы найти тот элемент, который некорректно влияет на отображение. Останется изучить стили и найти те, которые работают не как ожидается.

Благодарю. Попробую.

10 часов назад, Full-R сказал:

Нельзя доверять режиму эмуляции смартфона. Он сильно обманывает. 

Если очень нужна консоль при работе над мобильной версией со смартфона используйте настройку логирования через ADB. 

Работать неудобно к сожалению. 

Спасибо. Попробую для начало обойтись без консолей и сервисов.

Это хромовский баг. Дело не только в моем сайте.