Jump to content

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


guram07
 Share

Recommended Posts

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

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

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


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

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

Edited by guram07
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy