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

Я разрабатываю iPhone-версию веб-сайта, управляемого Wordpress, и мне было интересно, есть ли способ отключить горизонтальную прокрутку, когда веб-сайт открыт в Safari для iPhone. Прямо сейчас, я на полпути через разработку и просто чтобы проверить, могу ли я отключить горизонтальную прокрутку, я скрыл любой из элементов, которые превышали ширину экрана, но все же я могу прокручивать горизонтально вправо. Я попытался поместить следующий код внутри <style> теги в <head> но это не помогло:

body { overflow-x: hidden;}

Я поставил следующее <meta> код внутри файла Эхо, если пользователь просматривает сайт с 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, было несколько элементов, которые превышали ширину ~312px, поэтому я все еще мог проведите пальцем влево и после регулировки ширины всех таких элементов, Я отключил горизонтальный свайп. Единственное, чему я научился-это прятаться. переполнение-x не помогает в случае iPhone / iPad, вы должны уменьшить ширина всех элементов к ширине вашего экран в противном случае вы все равно сможете провести пальцем по горизонтали.

15
css horizontal-scrolling ios iphone mobile-safari

3 ответов

добавить переполнения на вашем теле, как это:

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

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

body, html{
    overflow-x: hidden;
}

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

13

у меня была такая же проблема с мобильным меню, расположенным вне области просмотра. overflow-x: скрытые решения в телефонах Android, но не в айфонах. Я решил, изменив "абсолютную" на "фиксированную" позицию в меню:

body { overflow-x: hidden; }    
nav { position: absolute; width: 300px; right: -300px; }

в:

body { overflow-x: hidden; }    
nav { position: fixed; width: 300px; right: -300px; }

надеюсь, что это помогает.

2