deshabilitar desplazamiento horizontal en un website de iPhone

Estoy desarrollando una versión para iPhone de un website impulsado por WordPress y me preguntaba si hay algún método para deshabilitar el desplazamiento horizontal cuando el website está abierto en Safari para iPhone. En este momento, estoy a medio path del desarrollo y solo para comprobar si puedo deshabilitar el desplazamiento horizontal, he ocultado cualquiera de los elementos que excedían el ancho de la pantalla, pero aún puedo desplazarme horizontalmente hacia la derecha. Intenté poner el siguiente código dentro de las tags <style> en el <head> pero eso no ayudó:

cuerpo {overflow-x: hidden; }

Puse el siguiente código <meta> dentro del file principal para hacer eco si el usuario está viendo el website desde un iPhone pero solo deshabilita el pellizco del usuario, es decir, no puede acercar y alejar presionando la pantalla.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

Actualmente estoy usando un iPhone 4 para consultar el website y se puede acceder al website en este enlace: http://ignoremusic.com . Esperando una solución de ustedes, gracias.

SOLUCIÓN: Como lo sugirió @Riskbreaker, había algunos elementos que superaban el ancho de ~ 312px, por lo que aún podía deslizar hacia la izquierda y, después de ajustar el ancho de todos esos elementos, deshabilité el deslizamiento horizontal. Una cosa que aprendí es que ocultar el desbordamiento-x no ayuda en el caso de un iPhone / iPad, tienes que networkingucir el ancho de todos los elementos al ancho de tu pantalla, de lo contrario, todavía podrás desliza horizontalmente.

Agrega desbordamientos en tu cuerpo así:

 body { font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif; font-weight: normal; overflow: hidden; overflow-y: auto; } 

Y sí quédate con esto:

 <meta name="viewport" content="width=device-width"> 

Sé que llegué un poco tarde a la fiesta, pero estaba teniendo el mismo problema y lo resolví agregando:

 body, html{ overflow-x: hidden; } 

¡Con suerte esto ayudará a otra persona!

Estaba teniendo el mismo problema con un menu mobile ubicado fuera del área de visualización. overflow-x: oculto resuelto en teléfonos Android, pero no en iPhones. Resolví cambiando la position 'absoluta' a 'fija' al menu:

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

a:

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

Espero eso ayude.