У меня проблема с горизонтальными прокрутками на некоторых телефонах для моего сайта. Я попытался поместить overflow-x: hidden, но он не работает. Ширина автоматически, так что она фактически автоматически изменит размер веб-страницы в соответствии с размером экрана. Все остальные телефоны хороши, если смотреть в Blackberry, Nokia E52 и Windows Mobile, появится горизонтальная прокрутка.
Любые советы? Спасибо!
Чтобы установить ширину для ширины устройства, используйте следующее:
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
Просто добавьте этот CSS:
html, body {
overflow-x: hidden;
}
body {
position: relative
}
Я нашел этот ответ 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;
}
Для меня метатег viewport фактически вызвал проблему с горизонтальным прокруткой на Blackberry.
Я удалил content="initial-scale=1.0; maximum-scale=1.0; из тега viewport и устранил проблему. Ниже мой текущий тег viewport:
<meta name="viewport" content="user-scalable=0;"/>
Я знаю, что это старый вопрос, но стоит отметить, что BlackBerry не поддерживает overflow-x или overflow-y.
Смотрите мой пост здесь
Я использую это, чтобы сделать пользователя еще доступным для увеличения и уменьшения:
<meta name="viewport" content="width=device-width;" />
Это работает для меня на всех мобильных устройствах в портретном и альбомном режимах.
<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">
У меня была такая же проблема. Добавление 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. Также я использовал запятые между значениями. Но, похоже, он работает и с полуколокой.