Как избежать горизонтальной прокрутки на мобильной сети с помощью адаптивного веб-дизайна?

У меня есть адаптируемое веб-приложение. Чтобы избежать горизонтальной прокрутки, я написал следующий код CSS:

html {
    overflow-x: hidden; }

Это отлично работает на рабочем столе, но не на мобильном устройстве. Если я покажу приложение на мобильном устройстве, приложение будет адаптироваться отлично. Проблема в том, когда я прокручиваю справа налево. Страница немного перемещается. Я хочу, чтобы страница не перемещалась горизонтально.

Edit:

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

Ответы

Ответ 1

Проверьте все прокладки. Если вы добавите дополнение к значению с шириной, установленной на 100%, оно будет выходить за пределы родителя.

Показаны здесь http://jsfiddle.net/wzZ3W/

код

<div id="fillX">
    <div id="childXFill">
    </div>
</div>

#fillX
{
    background:red;
    width:100%;
    opacity:0.5;
}

#childXFill
{
    background:blue;
    width:100%;
    padding:10px;
    opacity:0.5;
}

Также проверьте отрицательные поля слева и справа на элементах, которые охватывают страницу. Например. http://jsfiddle.net/s7zrukj2/2/

Кроме того, используйте CSS Reset.

Если вы не используете overflow: hidden, вы должны, вероятно, установить его и на элемент body. Таким образом

body, html { overflow-x:hidden; }

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

Ответ 2

Если вы не работаете на мобильных устройствах, вы должны использовать следующий метатег:

<meta name="viewport" content="width=device-width, initial-scale = 1.0, 
maximum-scale=1.0, user-scalable=no" />

это установит ширину в ширину устройства.

Ответ 3

Вам нужно убедиться, что ширина родительского контейнера не шире, чем размер мобильного экрана

Лучше всего использовать ширину% для всего и гарантировать, что контент не будет исправлен, и это будет больше, чем размер мобильного экрана

Ответ 4

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

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

Ответ 5

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

<meta name="viewport" content="width=device-width, initial-scale = 1.0,maximum-scale=1.0, user-scalable=no" />

Убедитесь, что вы скрываете переполнение

  body, html { overflow-x:hidden; }

Ответ 6

Я просто хотел поделиться тем, как я решил свою проблему. Я перепробовал все, включая overflow-x, добавив красную рамку ко всем элементам и т.д. Все еще смог прокрутить вправо.

Во-первых, я начал с удаления контейнеров в "элементе проверки", пока прокрутка вправо была невозможна. Затем просверлили в div, которые были проблемой. Это был скрытый выпадающий элемент div, который отображался в " visible: hidden" и отображался: block; , Я исправил это, поставив "display: none", и теперь все хорошо.

Ответ 7

Проблема с выравниванием меню на моем сайте показывает, пожалуйста, помогите мне, ребята, как решить выравнивание меню. пожалуйста, проверьте проблемный мобильный resposive- https://thegreendigital.com