iphone - apple-mobile-web-app-status-bar-style
Deshabilitar el desplazamiento horizontal en un sitio web de iPhone (3)
Agregue desbordamientos en su cuerpo de esta manera:
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">
Estoy desarrollando una versión para iPhone de un sitio web basado en Wordpress y me preguntaba si hay algún método para desactivar el desplazamiento horizontal cuando el sitio web está abierto en Safari para iPhone. En este momento, estoy a medio camino del desarrollo y solo para comprobar si puedo desactivar 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é colocar el siguiente código dentro de las etiquetas <style> en el <head> pero eso no ayudó:
cuerpo {overflow-x: oculto; }
He puesto el siguiente código <meta> dentro del archivo de cabecera para hacer eco si el usuario está viendo el sitio web desde un iPhone, pero solo desactiva el pellizco del usuario, es decir, no puede acercar y alejar la imagen 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 sitio web y se puede acceder al sitio visitando este enlace: http://ignoremusic.com . Esperando una solución de parte de ustedes, gracias.
SOLUCIÓN: Según lo sugerido por @Riskbreaker, había algunos elementos que excedían el ancho de ~ 312px, por lo que todavía podía deslizar hacia la izquierda y, después de ajustar el ancho de todos esos elementos, deshabilité el barrido horizontal. Una cosa que aprendí es que ocultar overflow-x no ayuda en el caso de un iPhone / iPad, tiene que reducir el ancho de todos los elementos al ancho de la pantalla, de lo contrario aún podrá deslizar horizontalmente.
Estaba teniendo el mismo problema con un menú móvil ubicado fuera del área de la ventana gráfica. overflow-x: oculto resuelto en teléfonos Android, pero no en iPhones. Resolví cambiando la posición ''absoluta'' a ''fija'' al menú:
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.
Sé que llego un poco tarde a la fiesta, pero tuve este mismo problema y lo resolví agregando:
body, html{
overflow-x: hidden;
}
¡Espero que esto ayude a alguien más!