sistema - Sitio web receptivo en iPhone: espacio en blanco no deseado al rotar de paisaje a retrato
liberar espacio sistema iphone (12)
Estoy creando un sitio web receptivo, y acabo de notar un comportamiento extraño en mis páginas de contenido cuando lo veo en el iPhone. Se escala correctamente cuando se carga en modo vertical y también cuando se gira a horizontal. Sin embargo, al girar de nuevo a retrato, la página parece desplazarse hacia la izquierda, o no acercarse correctamente, y hay una franja de espacio en blanco en el lado derecho. Este espacio en blanco también parece estar presente en la primera carga en retrato ya que el usuario puede deslizar la página izquierda
En lugar de complicar más la explicación, aquí hay un enlace a una página de muestra donde se está produciendo este comportamiento . Eche un vistazo a un iPhone, luego eche un vistazo a la página de inicio que no tiene este problema .
Si necesitas ver algo más, solo yo sé :)
¡Arreglado! El problema venía de un div en particular: para encontrarlo, era un proceso de eliminación de los diferentes elementos hasta que el problema desaparecía.
Para solucionarlo, necesitaba agregar overflow-x: hidden a ese div y lo ordena. Espero que esto sea útil para otros con un problema similar.
¡Fijo! Tuve un problema similar. Se corrigió estableciendo el ancho a un ancho de dispositivo actual.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
El uso de "overflow-x: hidden" resuelve parte del problema, pero atornilla el desplazamiento, actuando con comportamientos extraños (como dijo Jason).
A veces, la parte más difícil es descubrir qué está causando el problema. En mi caso, después de unas horas, si descubrí que el problema estaba en Bootstrap de Twitter:
Si está utilizando Bootstrap de Twitter con zonas de "grupo de control" para sus formularios, el problema podría estar allí. En mi caso, resolví el problema con:
.control-group .controls {
overflow-x: hidden
}
Ahora el espacio en blanco a la derecha había desaparecido :)
Este problema ocurre cuando el ancho de cualquier división es mayor que el ancho de la pantalla de iPAD.
En mi caso, algunas divisiones tenían un tamaño de 1000 px, así que opté por el width:auto y funciona. overflow-x:hidden también hace lo mismo, pero no es una forma preferida.
Estoy usando Bootstrap 3.3. Intenté todas estas soluciones y nada funcionó. Luego, cambié mi < div class = "container" > a < div class = "container-fluid" > en la sección con la que estaba teniendo problemas. Esto resolvió el problema.
Intenté todo lo que se sugirió aquí, nada funciona. Luego he vuelto a relacionar que se conecte con la escala de página. Entonces agregué <meta name="viewport" content="width=device-width, initial-scale=1.0"> a header.php en la carpeta de mi tema principal y se solucionó el problema.
Me gustaría agregar a la solución de Navneet Kumar porque funcionó para mí. Cualquier etiqueta div diseñada con ancho = 100% tampoco puede tener margen izquierdo o derecho. Los navegadores móviles (noté el problema en dispositivos iPhone y Android) interpretan que el div tiene un ancho mayor al 100%, creando así el espacio extra en el lado derecho. (Lo sabía con respecto a los anchos fijos, pero no al ancho porcentual). En su lugar, use width = auto junto con el relleno.
No tengo un iphone para probar esto, pero me he encontrado con sitios web similares que he creado en el pasado. En mi caso, es porque había un error en el móvil safari que alteró la balanza cuando iba de un puerto a otro.
El siguiente código me lo arregló (no recuerdo de dónde lo saqué en este momento)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll(''meta[name="viewport"]'')[0];
if (viewportmeta) {
viewportmeta.content = ''width=device-width, minimum-scale=1.0, maximum-scale=1.0'';
document.body.addEventListener(''gesturestart'', function() {
viewportmeta.content = ''width=device-width, minimum-scale=0.25, maximum-scale=1.6'';
}, false);
}
}
Parece que los resultados varían según las circunstancias pero en todo el sitio
html, cuerpo {ancho: 100%; x-overflow: oculto; }
parece haber funcionado para mí!
Sé que ha pasado un tiempo desde que se abrió este tema, pero encontré una situación similar y descubrí que era porque tenía un elemento con las siguientes propiedades right: -999999px; position: absolute; right: -999999px; position: absolute; oculto fuera de la pantalla.
Cambiando lo anterior a la left: -999999px; position: absolute; left: -999999px; position: absolute; Resolvió el mismo problema que tenía el OP (pantalla blanca a la derecha y capacidad de deslizar hacia la derecha).
SOLUCIONADO ¡¡
Desde que instalé la plantilla 3.x de protostar joomla y comencé a agregar contenido en el módulo K2, noté ese desplazamiento molesto con un espacio en blanco en el lado derecho, visible especialmente en iphones.
Se dio una respuesta parcial correcta para Eva Marie Rasmussen, agregando a la etiqueta del cuerpo en la plantilla del archivo. Css estos valores:
width: auto;
overflow-x: hidden;
Pero esta solución es solo parcial. Busque div clase o etiqueta que está causando este problema y una vez detectado agregue a esa clase en el archivo templete.css los mismos valores:
width: auto;
overflow-x: hidden;
En mi caso, agrega a la clase "span" estas dos líneas para que finalmente se vea así:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
Y está funcionando ahora¡¡
Tuve el mismo problema, lo solucioné configurando:
html, body { width:100%; overflow:hidden; }