Подтвердить что ты не робот

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

Я разрабатываю версию 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, вы должны уменьшите ширину всех элементов до ширины в противном случае вы все равно сможете пронести по горизонтали.

4b9b3361

Ответ 1

Добавьте переполнение на вашем теле:

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">

Ответ 2

Я знаю, что я немного опаздываю на вечеринку, но у меня была эта же проблема и она была решена, добавив:

body, html{
    overflow-x: hidden;
}

Надеюсь, это поможет кому-то еще!

Ответ 3

У меня была такая же проблема с мобильным меню, расположенным за пределами области просмотра. 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; }

Надеюсь, что это поможет.