2013-04-08 4 views
13

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

тела {переполнение-х: скрытый; }

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

+0

, так что в соответствии с вашим разделом «Решение» - есть ли способ принудительно отключить горизонтальный прокрутки, если есть внеэкранированные элементы? –

ответ

9

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

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

Спасибо за ваш ответ, но добавление кода CSS не помогло, я все равно могу прокручивать по горизонтали. –

+1

Вы добавляете это на style.css или свой основной css? Кроме того, некоторые из css игнорируются в вашем ответе следующим образом: '#headertop {width: 980px;}' ...., который делает горизонтальный для прокрутки ... только один пример, который нужно сначала исправить ... – Riskbreaker

+0

, чтобы проверить, будет ли это работать, я добавил его в тег , используя теги