Как убрать горизонтальный скролл в html в мобильной версии

Проблемы с мобильной версией.

Вернее, чтобы на экране моб. телефона отображалось все корректно, а не так, что левая часть видна, а правая только через горизонтальную прокрутку.

Все хорошо по Mobile Friendly Websites от гугла, но видно, что в экране не вся страница отображается, а только часть, на что указывает проверка через http://pr-cy.ru/speed_test/

Так же и Яндекс Вебмастер ругается:

Не подскажите как это можно оптимизировать?

Плагины что гугл предлагет ставил, они не помогают, 1 корявый, другой не работает, третий не дает рекламу контекстную ставить.

+ еще и текст на мобилках почему то мелкий, как его можно увеличить? при просмотре на мобильных?

eTarget 2011:Панельная дискуссия «Стратегия и планирование рекламной кампании в интернете»
eTarget 2011: Круглый стол «Реклама в онлайн-видео»
Могут ли «плохие» входящие ссылки привести к ухудшению ранжирования?

добавьте в css файл:

@media all and (max-width:450px)<

barabash, спасибо, в метрике и pr-cy проблема ушла.

Правда у меня на мобиле как было все, так и осталось, может что то не то с мобилой, так как Toggle device toolbar Хромовский — показывает все отлично.

Только вот рекламные блоки AdSense остаются большими, и не входят в рамки, с ними можно что то сделать?

К примеру если прописываю initial-scale=0.47 вместо, initial-scale=1, то блоки стоят нормально и все классно, вот только метрика, pr-cy и даже гугл начинает ругаться на мобильную версию.

P.S. А как Вы нашли сразу все нужные элементы сайта для изменения? через firebug ? или есть софт получше, а то хочу еще один сайт настроить так.

LuckyLuciano:
barabash, спасибо, в метрике и pr-cy проблема ушла.

Только вот рекламные блоки AdSense остаются большими, и не входят в рамки, с ними можно что то сделать?

Отключить прокрутку на всех мобильных устройствах

Это звучит так, будто должно быть решение для этого по всему Интернету, но я не уверен, почему я не могу его найти. Я хочу отключить горизонтальную прокрутку на мобильных устройствах. В основном пытается добиться этого:

Это может быть релевантная информация: у меня также есть это в моем теге, потому что я также не хочу, чтобы пользователь мог увеличить:

10 ответов

Относительная позиция важна, и я просто споткнулся об этом. Не удалось заставить его работать без него.

Ответ cgvector не работал у меня, но это делало:

Я бы не оставил его просто так, нужна более разумная логика, чтобы выбрать, когда нужно предотвращать прокрутку, но это хороший старт.

Для будущих поколений:

Чтобы предотвратить прокрутку, но сохраните контекстное меню, попробуйте

Он по-прежнему предотвращает путь больше, чем может кому-то понравиться, но для большинства браузеров единственное поведение по умолчанию, которое следует предотвратить, должно прокручиваться.

Для более сложного решения, которое позволяет прокручивать элементы внутри неконтролируемого тела и предотвращает использование резиновой ленты, посмотрите на мой ответ здесь:

Я подозреваю, что большинство людей действительно хотят отключить масштабирование/прокрутку, чтобы собрать больше приложений; потому что ответы, похоже, содержат элементы решений как для масштабирования, так и для прокрутки, но никто не прибил ни одного.

скроллинг

Чтобы ответить на OP, единственное, что вам нужно сделать, чтобы отключить прокрутку, — это перехватить события scroll и touchmove окна и вызвать preventDefault и stopPropagation в событиях, которые они генерируют; так

И в таблице стилей убедитесь, что теги body и html включают следующее:

Масштабирование

Однако прокрутка — это одно, но вы, вероятно, тоже хотите отключить масштабирование. Что вы делаете с метатегами в вашей разметке:

Все это вместе дает вам приложение, похожее на опыт, возможно, лучше всего подходит для холста.

(Будьте осторожны с рекомендацией некоторых добавить атрибуты, такие как initial-scale и width в метатег, если вы используете холст, потому что холсты масштабируют свое содержимое, в отличие от элементов блока, и вы завершаете с уродливым холстом, чаще всего).

Убираем горизонтальный скролл в мобильной версии сайта

Admin 05.05.2017 , обновлено: 13.09.2017 CSS, WordPress

Как убрать прокрутку по горизонтали в мобильной версии сайта. Как настроить css стили, чтобы скроллинг влево и вправо при просмотре через телефон не работал. Это же касается отключения горизонтальной прокрутки на iPhone.

Для выполнения этих задач нужно в стилях CSS своего сайта прописать следующее:

Чтобы убрать горизонтальный скролл одного HTML тега html или body не всегда достаточно, чтобы прокрутка исчезла. Обязательно нужно добавить overflow-x: hidden; к обоим тегам.

Если это не помогает, значит нужно искать ошибки в дизайне сайта. Какой-то элемент в дизайне сайта выходит за края и тем самым стиль overflow-x: hidden; перестаёт работать.

У меня так случилось с плагином Antispam Bee на сайте WordPress. Версия плагина 2.7.0 работала отлично, а как вышла версия 2.7.1, то плагин внёс в дизайн сайта какой-то лишний элемент.

Я долго искал причину ошибки, прежде чем понял, что причина вызвана плагином. Сначала пришлось потратить несколько часов и перелопатить весь css код на своём сайте. И только когда ничего не помогло, пришла догадка, что возможна причина в некорректном вмешательстве плагинов в работу сайта.

Как оказалось плагин Antispam Bee вносил что-то своё в дизайн формы комментариев. При этом видимого изменения не было.

А внутри HTML кода он вносил изменения и эту форму:

Менял на следующую:

В результате какой-то невидимый элемент выходил за границу экрана. Элемент не отображался и потому понять, что именно стало причиной неисправности было затруднительно. И настольная версия браузера и мобильная никаких лишних элементов не показывала.

Я так и не нашёл как победить эту ошибку, не изменяя свои стили. Пришлось внести коррективы у себя в CSS. Вместо указанного стиля у себя на сайте:

Я уменьшил поле комментариев со 100% до 97%.

После этого возможность горизонтального скролинга исчезла.

Комментарии к статье “ Убираем горизонтальный скролл в мобильной версии сайта ” (10)

Спасибо
помогло html не убирал, теперь все нормально

У меня сайт без плагина, делал адаптивную верстку давно. А сейчас стал замечать, есть горизонтальная прокрутка в одну сторону с права на лево. Не знаю что и делать, только догадываюсь, что где-то править надо. А где? Сайт mycompplus.ru

На разрешении в 768 у вас примешивается стиль pill_m, в котором задано width: 768px !important;. Этот участок нужно переписать.

Ребята, такая же проблема. Кто поможет исправить?

Sam, Как описал мне админ, мне это помогло

Юрий, спасибо за обратную связь. Можешь посмотреть у меня? Я плохо еще шарю. У меня проблема в кнопке scroll-on-top была. Я установил плагин до темы и он видимо взял произвольную ширину. Удалил кнопку, почистил кэш и все равно не помогает. Видимо этот плагин внес изменения в код, как пишет автор, но я не совсем понимаю как по аналогии решить проблему(что и куда прописать и исправить). Если не трудно, оставь контакт для связи. Вот больной engineeringdoc.ru

Посмотрел сайт, ответ дан в первом абзаце этой статьи. Только не говорите, что вы пробовали �� Вам надо поставить overflow-x: hidden;.

Спасибо за обратную связь. В какой файл это добавить, если я собрал на конструкторе и движок wp. Я так понимаю что это файл с css, но где он находится(в какой папке) и как называется не понимаю. Подскажите для «особо умных в этом деле»

P. S. Очень хочу исправить сам, но как слепой котенок уперся в угол.

Все сработало! Я вставил команду через внешний вид-> настроить->дополнительные стили, для тех у кого wordpress. Всем спасибо!

Добрый день! Подскажите, что нужно сделать у меня, чтобы убрать горизонтальный скролл. Сайт: sst-26.ru

На мобильных появляется горизонтальная прокрутка, как убрать?

VicTHOR

VicTHOR, товарищ попросил ему сайт сделать, домен старый свой был, пока на нём тестим, потом перенесу ;))