que - Mobile Safari Viewport-¿Cómo evitar el desplazamiento horizontal?
viewport html bootstrap (5)
¿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.
Por lo tanto, para evitar que esto suceda, establezca un desbordamiento: oculto en el elemento que contiene su contenido o, de lo contrario, evite que los elementos se desborden.
NB: otros navegadores móviles también admiten la metaetiqueta de viewport desde hace un tiempo, por lo que también querrás probarlos.
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 metaetiqueta 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 cargo la página, parece estar bien:
Pero puedo desplazarme horizontalmente para que se vea así (esto es lo más a la derecha que puedo):
Cuando lo muevo hacia la vista horizontal, la página se visualiza como se esperaba, bloqueando la posición de desplazamiento horizontal.
Estoy intentando descubrir cómo hacer que esta página no se desplace horizontalmente. ¿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í.
No sé si solo soy yo o si parte del código publicado se ha tipeado 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 así
<meta name=''viewport'' content=''width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0'' />
así que el contenido solo aparece una vez sin "como no tiene cierre" al final del código .....
Tarde en llegar 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, solo necesitaba cambiar la metaetiqueta de la vista desde:
<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'' />
Al agregar la ''escala inicial'', se bloqueó para que solo se desplazara verticalmente como se esperaba.
body div {overflow: hidden;} @ consultas de medios
. Esto evitará que cualquier elemento empuje el contenido.
body { overflow-x: hidden; } body { overflow-x: hidden; } también funciona.