¿Cómo encajar en la pantalla después de cambiar el ancho de la ventana de visualización en el cambio de orientación?

Necesito el ancho de la ventana de vista para que una página sea 950px en paisaje y 630px en retrato. Estos anchos de píxeles son por desgracia inflexibles.

Estoy ajustando el ancho del contenido de DOM basado en la orientación usando consultas de medios CSS.

Estoy escuchando eventos de cambio de orientación en JS para cambiar el tamaño de la ventana gráfica sobre el cambio de orientación.

Todo se ve bien en la carga inicial de la página (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 de visualización a la pantalla. Un doble toque o dos lo endereza. Pero necesito que sea automático.

He adjuntado la fuente a continuación y la he subido a una URL de demostración.

A continuación se muestran las capturas de pantalla tomadas después de los cambios de orientación: de paisaje a retrato y de retrato a paisaje.

¿Cómo puedo obligar a Safari a establecer automáticamente el ancho de la ventana de visualización en el ancho de la pantalla? ¿O voy a hacer todo esto mal?

Cambiar los diversos ajustes de escala en la ventana no ha ayudado. El ajuste maximum-scale=1.0 o initial-scale=1.0 parece anular mi width , estableciendo el width al width del device-width (es decir, 1024 o 768 en mi iPad 2), dejando un espacio de margen muerto. El establecimiento minimum-scale=1.0 parece no hacer nada.

Del paisaje al retrato

Del retrato al paisaje

 <!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">&rarr;</div> <div class="left">&larr;</div> </div> </body> </html> 

4 Solutions collect form web for “¿Cómo encajar en la pantalla después de cambiar el ancho de la ventana de visualización en el cambio de orientación?”

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); 

OK, la respuesta estaba en los atributos *-scale después de todo.

Puede forzar una escala específica estableciendo tanto maximum-scale minimum-scale con el mismo valor. Pero hay que sacrificar la escala de usuario estableciendo la metaetiqueta en <meta name='viewport' content='user-scalable=no' /> .

Tenga en cuenta que los ajustes de *-scale son relativos a las dimensiones de la pantalla del dispositivo, que varían de un dispositivo a otro. Afortunadamente, puede buscar estos en el objeto de screen en JS.

Por lo tanto, si su ancho de contenido es inferior a 980, su escala forzada debe ser screen_dimension / content_width .

Esta versión actualizada de mi anterior JS ha hecho que los cambios de orientación funcionen sin problemas. Probado en el iPhone 4 y el 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); } 

Utilice la sabiduría de este post y simplemente obtenga el ancho y la altura del contenedor de su script (anchura y altura de la ventana) … https://stackoverflow.com/a/9049670/818732

Usando esta ventana de visualización: target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no resuelto 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 escala automáticamente.

Tenía un problema similar con iOS, después de algunas pruebas terminó con una solución que puede encontrar aquí

Restablecer el zoom en iOS después del cambio del ancho de la ventana de visualización

En mi solución, el zoom está deshabilitado pero puedes eliminar libremente "user-scalable = no" para hacerlo zoomable.

  • ¿Cómo puedo reflejar la salida sólo en dispositivos compatibles con HDCP?
  • ADB no encuentra mi dispositivo Archos
  • Mejor tableta Android para el desarrollo
  • La aplicación de Android para tablets sigue mostrando "Designed for Phones"
  • Tablet no puede descargar el archivo .apk en algunos navegadores
  • Emuladores de tablets en línea para Android
  • Programación en la tableta Android
  • Hacer que la aplicación de Android no esté disponible para tablets
  • ¿Es posible instalar Eclipse IDE en una pestaña Galaxy?
  • ¿Por qué obtengo esta sugerencia optimizadora en Google Play?
  • La aplicación no es compatible con la tableta
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.