javascript - ismobile - ¿Cómo ajustar la pantalla después de cambiar el ancho de la ventana gráfica en el cambio de orientación?
var ismobile (4)
OK, la respuesta está en los atributos de *-scale después de todo.
Puede forzar una escala específica estableciendo tanto maximum-scale minimum-scale en el mismo valor. Pero tienes que sacrificar la escala del usuario configurando la metaetiqueta en <meta name=''viewport'' content=''user-scalable=no'' /> .
Tenga en cuenta que la configuración de la *-scale está relacionada con las dimensiones de la pantalla del dispositivo, que varían de un dispositivo a otro. Afortunadamente, puede buscarlos en el objeto de screen en JS.
Por lo tanto, si el ancho del contenido es inferior a 980, la escala forzada debe ser screen_dimension / content_width .
Esta versión actualizada de mi JS anterior ha hecho que los cambios de orientación funcionen sin problemas. Probado en iPhone 4 y iPad 2.
function adapt_to_orientation() {
var content_width, screen_dimension;
if (window.orientation == 0 || window.orientation == 180) {
// portrait
content_width = 630;
screen_dimension = screen.width * 0.98; // fudge factor was necessary in my case
} else if (window.orientation == 90 || window.orientation == -90) {
// landscape
content_width = 950;
screen_dimension = screen.height;
}
var viewport_scale = screen_dimension / content_width;
// resize viewport
$(''meta[name=viewport]'').attr(''content'',
''width='' + content_width + '','' +
''minimum-scale='' + viewport_scale + '', maximum-scale='' + viewport_scale);
}
Necesito el ancho de la ventana gráfica para que una página tenga 950 px en horizontal y 630 px en vertical. Estos anchos de píxel son desafortunadamente inflexibles.
Estoy ajustando el ancho del contenido DOM basado en la orientación usando consultas de medios CSS.
Estoy escuchando los 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 (vertical u horizontal).
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 lo enderezan. Pero necesito que sea automático.
Adjunto la fuente a continuación, y la subí a una URL demostración.
A continuación se muestran las capturas de pantalla tomadas después de los cambios de orientación: de horizontal a vertical y de vertical a horizontal.
¿Cómo puedo obligar a Safari a establecer automáticamente el ancho de la ventana gráfica al ancho de la pantalla? ¿O voy a hacer todo esto mal?
Cambiar las diferentes 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 el width en el width del device-width (es decir, 1024 o 768 en mi iPad 2), dejando un margen muerto. Establecer 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>
Tuve este problema y escribí algunos JavaScript para solucionarlo. Lo puse en Github aquí:
https://github.com/incompl/ios-reorient
Aquí está el código para su conveniencia:
window.document.addEventListener(''orientationchange'', function() {
var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
var viewportmeta = document.querySelector(''meta[name="viewport"]'');
if (iOS && viewportmeta) {
if (viewportmeta.content.match(/width=device-width/)) {
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, ''width=1'');
}
viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, ''width='' + window.innerWidth);
}
// If you want to hide the address bar on orientation change, uncomment the next line
// window.scrollTo(0, 0);
}, false);
Tuvo un problema similar con iOS, después de que algunas pruebas terminaron con una solución que puede encontrar aquí
Restablecer Zoom en iOS después de cambiar el ancho de la ventana gráfica
En mi solución, el zoom está deshabilitado, pero puedes eliminar libremente "user-scaleable = no" para que pueda hacer zoom.
use la sabiduría de esta publicación y simplemente obtenga el ancho y el alto del contenedor de su script (ancho y alto de la ventana) ... https://.com/a/9049670/818732
usando esta ventana: target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no solucioné mis problemas en Android AND ios. Tenga en cuenta que target-densitydpi se marcará en TODOS los demás dispositivos pero Android, pero no hará ningún daño. Se asegurará de que nada se escale automáticamente.