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

Ответ 1

Чтобы установить ширину для ширины устройства, используйте следующее:

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

Ответ 2

Просто добавьте этот CSS:

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

Ответ 3

Я нашел этот ответ fooobar.com/questions/14529/..., который идеально подходит для меня:

используйте это в стиле

body {
    overflow-x: hidden;
    width: 100%;
}

Используйте это в заголовке тега

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />

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

body {
    overflow-x: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Ответ 4

Для меня метатег viewport фактически вызвал проблему с горизонтальным прокруткой на Blackberry.

Я удалил content="initial-scale=1.0; maximum-scale=1.0; из тега viewport и устранил проблему. Ниже мой текущий тег viewport:

<meta name="viewport" content="user-scalable=0;"/>

Ответ 5

Я знаю, что это старый вопрос, но стоит отметить, что BlackBerry не поддерживает overflow-x или overflow-y.

Смотрите мой пост здесь

Ответ 6

Я использую это, чтобы сделать пользователя еще доступным для увеличения и уменьшения:

<meta name="viewport" content="width=device-width;" />

Ответ 7

Это работает для меня на всех мобильных устройствах в портретном и альбомном режимах.

<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">

Ответ 8

У меня была такая же проблема. Добавление max-scale = 1 фиксировало это:

OLD: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

NEW: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

P.S. Также я использовал запятые между значениями. Но, похоже, он работает и с полуколокой.