deshabilitar scroll horizontal en la web móvil

Tengo un problema donde aparecen rollos horizontales en ciertos teléfonos para mi sitio. Intenté poner overflow-x: oculto pero no funciona. El ancho es automático, de modo que cambiará automáticamente el tamaño de la web para que se adapte al tamaño de la pantalla. Todos los demás teléfonos están bien, excepto cuando se ven en blackberry, nokia e52 y Windows Mobile, aparecerá el desplazamiento horizontal.deshabilitar scroll horizontal en la web móvil

¿Algún consejo? ¡Gracias!

Fuente

2010-11-16 Sylph

Parece que la imagen del banner hace que todo el sitio necesite tener desplazamiento horizontal para ciertos teléfonos. De todos modos para hacer que la imagen de banner para cambiar el tamaño automático? – Sylph

Para mí, la metaetiqueta de la vista en realidad causó un problema de desplazamiento horizontal en el Blackberry.

Eliminé content="initial-scale=1.0; maximum-scale=1.0; de la etiqueta viewport y solucionó el problema. A continuación se muestra mi actual etiqueta de ventana:

<meta name="viewport" content="user-scalable=0;"/>

Fuente

2011-03-18 17:39:38

Uso <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> con el fin de establecer el ancho de la anchura del dispositivo.

Fuente

2011-03-25 17:05:04 jrosell

Sé que esta es una vieja pregunta, pero vale la pena señalar que BlackBerry no es compatible con overflow-x o overflow-y.

Ver mi post here

Fuente

2013-06-06 08:45:11 samael

He encontrado esta respuesta over here on stackoverflow que funciona perfectamente para mí:

uso de este estilo en

body { 
    overflow-x: hidden; 
    width: 100%; 
}

Utilice esta etiqueta de la cabeza en

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> 
<meta name="apple-mobile-web-app-capable" content="yes" />

Una pequeña adición de la mía en caso de que tu cuerpo tenga acolchado (para evitar que el dispositivo de escala con el contenido de la caja del cuerpo, y por lo tanto dejar de añadir una barra de desplazamiento horizontal):

body { 
    overflow: hidden; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

Fuente

2013-06-07 10:06:21

Si crea una aplicación y la ve a través de una vista web, es útil agregar esto para evitar que se desplace de izquierda a derecha. overflow-x: oculto; – Mikeys4u

Yo agregaría para probar a fondo. En algunos casos, usar 'overflow: hidden;' bloqueará su página en la parte superior, sin posibilidad de desplazarse hacia abajo. Como relata Mikeys4u, generalmente es mejor usar 'overflow-x: hidden;'. – karolus

Lo utilizo para hacer que el usuario sigue siendo capaz de acercar y alejar:

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

Fuente

2014-06-28 11:02:06 michaelsp

html, body { 
    overflow-x: hidden; 
} 
body { 
    position: relative 
}

Basta con añadir este CSS

Fuente

2016-04-03 00:50:39 pollux1er

¡Este es el único que funcionó para mí! ¡Gracias! –

Sí, la mejor respuesta, póngalo en su consulta de medios para evitar el desbordamiento en los dispositivos móviles, además de la vista de medios, por supuesto. –

-2

que tenía el mismo problema. Adición-máximo de la escala = 1 fijado que:

OLD: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

P.S. También he estado usando comas entre valores. Pero parece funcionar también con el punto y coma.

Fuente

2016-06-17 18:28:23 StarflameDia

deshabilitar scroll horizontal en la web móvil

Respuesta

Cuestiones relacionadas