Mobile Safari Viewport - ¿Cómo evitar el desplazamiento horizontal?

Question

Estoy intentando configurar una ventana gráfica para Safari móvil. Con la metaetiqueta de la ventana gráfica, intento asegurarme de que no haya zoom y que no pueda desplazar la vista horizontalmente. Esta es la etiqueta meta que estoy usando:

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

en mi iPhone cuando la carga de la página, parece que mirar bien:

Pero puede desplazarse horizontalmente, de modo que se parece a esto (esto es lo más a la derecha que puedo ir:

Cuando el swing en la vista horizontal, la página se representa como esperado, bloqueando la posición de desplazamiento horizontal.

Estoy tratando de averiguar cómo hacer que esta página no se desplace horizontalmente en absoluto. ¿Es posible que tenga algún elemento de página que saque el contenido? Ni siquiera esperaba que eso fuera posible con un conjunto de ventanas correcto, pero estoy agarrando pajas aquí.

Answer 1

¿Es posible que tenga algún elemento de página que saque el contenido?

Sí, ese es realmente el caso. La configuración de la ventana gráfica solo define el área de la ventana gráfica visible, pero no trata de desactivar la panorámica lateral.

Para evitar que esto ocurra, configure un desbordamiento: oculto en el elemento que contiene su contenido, o bien, evite que los elementos se desborden.

NB: otros navegadores móviles también son compatibles con la metaetiqueta de viewport desde hace un tiempo, por lo que también querrás probarlos.

Answer 2

body { overflow-x: hidden; } también funciona.

Answer 3

cuerpo div {overflow: hidden;} @ medios consulta

. Esto evitará que cualquier elemento empuje el contenido.

Answer 4

Llegué tarde a la fiesta aquí, pero tenía un problema similar en el que tenía un desplazamiento horizontal a través de un iPhone 5, el sitio mostraba efectivamente el doble del ancho, con la mitad derecha completamente vacía.

De hecho, sólo tenía que cambiar la etiqueta meta de visualización de:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' /> 

a:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' /> 

Adición de la 'inicial escala' bloqueado hacia abajo de manera que sólo se desplaza verticalmente como se esperaba.

Answer 5

no saben si este soy yo o si una parte del código publicado ha sido escrito incorrectamente, pero:

Si esto

<meta name='viewport' content='content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' /> 

no leer como esto

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' /> 

entonces el contenido solo se muestra una vez sin "como no tiene cierre" al final del código .....