Necesito el ancho de la ventana gráfica para que una página tenga 950 px en el paisaje y 630 px en el retrato. Estos anchos de píxeles son, lamentablemente, inflexibles.¿Cómo ajustar a la pantalla después de cambiar el ancho de la ventana gráfica en el cambio de orientación?
Estoy ajustando el ancho del contenido de DOM según la orientación mediante consultas de medios de CSS.
Estoy escuchando eventos de cambio de orientación en JS para cambiar el tamaño de la ventana gráfica en el cambio de orientación.
Todo se ve bien en la carga de la página inicial (retrato o paisaje).
Sin embargo, después de un cambio de orientación, Mobile Safari conserva la configuración de escala anterior, en lugar de ajustar la ventana gráfica a la pantalla. Un doble toque o dos enderezan. Pero necesito que sea automático.
He adjuntado la fuente a continuación y la he subido a una demo URL.
A continuación se muestran las capturas de pantalla tomadas después de los cambios de orientación: de paisaje a retrato, y de vertical a horizontal.
¿Cómo puedo forzar a Safari a establecer automáticamente el ancho de la ventana gráfica en el ancho de la pantalla? ¿O estoy haciendo esto mal?
Cambiar las diversas configuraciones de escala en la ventana gráfica no ha ayudado. La configuración maximum-scale=1.0 o initial-scale=1.0 parece anular mi width, estableciendo width en device-width (es decir, 1024 o 768 en mi iPad 2), dejando espacio en el margen muerto. El ajuste minimum-scale=1.0 parece no hacer nada.
<!DOCTYPE html>
<html>
<head>
<title>iPad orientation</title>
<meta name="viewport" content="user-scalable=yes">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">;
/**
* update viewport width on orientation change
*/
function adapt_to_orientation() {
// determine new screen_width
var screen_width;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
screen_width = 630;
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
screen_width = 950;
}
// resize meta viewport
$('meta[name=viewport]').attr('content', 'width='+screen_width);
}
$(document).ready(function() {
// bind to handler
$('body').bind('orientationchange', adapt_to_orientation);
// call now
adapt_to_orientation();
});
</script>
<style type="text/css" media="screen">
body {
margin: 0;
}
#block {
background-color: #333;
color: #fff;
font-size: 128px;
/* landscape */
width: 950px;
}
#block .right {
float: right
}
@media only screen and (orientation:portrait) {
#block {
width: 630px;
}
}
</style>
</head>
<body>
<div id="block">
<div class="right">→</div>
<div class="left">←</div>
</div>
</body>
</html>
Yo también puedo confirmar que el anterior tiene resultados maravillosos en un ipad (mayo de 2013) – Richard
Obviamente se estropea el ancho en muchos otros dispositivos. Entonces realmente no es una buena solución. Pero finalmente hay algo con lo que trabajar :-) –
+1 para el concepto. Bonito. –