Cómo evitar el aumento de ancho después del cambio de orientación en el safari móvil

En Mobile Safari en mi iPad, tengo un comportamiento extraño después de cambiar la orientación del dispositivo. Aquí está mi archivo de prueba:Cómo evitar el aumento de ancho después del cambio de orientación en el safari móvil

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=0.7" /> 
     <style> 
      #block { 
       border: 1px solid red; 
       background-color: yellow; 
       font-size: 400%; 
       width: 700px; 
       height: 500px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="block">Hello world!</div> 
    </body> 
</html>

También se puede ver en Mobile Safari en esta dirección:

http://fiddle.jshell.net/eterps/jsTqj/show/

Cuando voy a la URL con mi iPad en orientación vertical y hacer algunos gestos banda magnética la página no se desplaza, lo cual es correcto.

Sin embargo, cuando giro el dispositivo al modo horizontal y hago algunos gestos para deslizar el dedo, gano espacio extra a la derecha sin ningún motivo aparente.

Pero aún más raro es el hecho de que cuando reinicio el safari móvil y voy a la URL mientras estoy en orientación horizontal todo el tiempo, el espacio adicional a la derecha no está presente.

¿Por qué aparece el espacio adicional a la derecha después de un cambio de orientación? ¿Y cómo puedo prevenirlo?

Fuente

2011-03-08 Erik

Cuando gira el dispositivo, Safari móvil cambia el tamaño de la ventana gráfica para que coincida con la nueva orientación.

Fuente

2011-03-17 09:45:24 Erik

Parece que Safari móvil intenta mantener la posición de visualización en el centro de la pantalla. Puede verificar esto siguiendo los parámetros window.outerWidth y window.scrollX. Son diferentes después de cargar la página y cambiar la orientación portrait -> landscape -> portrait.

Creo que este tema está relacionado con otra discusión Mobile site resize on orientation change not working in Safari

Puede forzar el redibujado de la página y ocultar espacio en blanco al siguiente script

$(window).bind('orientationchange', function() { 
    var oldWidth = $('body').innerWidth(); 
    $('body').width(oldWidth + 1); // Force redraw 
    $('body').width(''); // Return to previous state in case if width set by css, otherwise use $('body').width(oldWidth); 
});

Fuente

2013-09-18 20:53:24

Cómo evitar el aumento de ancho después del cambio de orientación en el safari móvil

Respuesta

Cuestiones relacionadas