Я разрабатываю версию iPhone на веб-сайте Wordpress, и мне было интересно, есть ли способ отключить горизонтальную прокрутку, когда веб-сайт открыт в Safari для iPhone. Прямо сейчас, я на полпути через разработку и просто чтобы проверить, могу ли я отключить горизонтальную прокрутку, я спрятал любой из элементов, превышающих ширину экрана, но все же я могу прокручивать по горизонтали вправо. Я попытался поместить следующий код в теги <style> в <head>, но это не помогло:
body {overflow-x: hidden; }
Я поставил следующий код <meta> внутри файла head, чтобы эхо, если пользователь просматривает веб-сайт с iPhone, но он только отключает ущемление пользователя, т.е. вы не можете увеличивать и уменьшать масштаб, зажав экран.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
В настоящее время я использую iPhone 4 для проверки веб-сайта, и на веб-сайт можно получить доступ, перейдя по этой ссылке: http://ignoremusic.com. Ждем решения от вас, ребята, спасибо.
РЕШЕНИЕ: Как было предложено @Riskbreaker, было несколько элементов, превышающих ширину ~ 312 пикселей, поэтому я все еще мог проведите пальцем влево и после регулировки ширины всех таких элементов, Я отключил горизонтальный салфетки. Одна вещь, которую я узнал, это то, что скрытие overflow-x не помогает в случае iPhone/iPad, вы должны уменьшите ширину всех элементов до ширины в противном случае вы все равно сможете пронести по горизонтали.
Добавьте переполнение на вашем теле:
body {
font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif;
font-weight: normal;
overflow: hidden;
overflow-y: auto;
}
И да оставайся с этим:
<meta name="viewport" content="width=device-width">
Я знаю, что я немного опаздываю на вечеринку, но у меня была эта же проблема и она была решена, добавив:
body, html{
overflow-x: hidden;
}
Надеюсь, это поможет кому-то еще!
У меня была такая же проблема с мобильным меню, расположенным за пределами области просмотра. overflow-x: скрытый, разрешенный на телефонах Android, но не в iPhone. Я решил, изменив "абсолютное" на "фиксированное" положение в меню:
body { overflow-x: hidden; }
nav { position: absolute; width: 300px; right: -300px; }
в
body { overflow-x: hidden; }
nav { position: fixed; width: 300px; right: -300px; }
Надеюсь, что это поможет.