¿Cómo configurar viewport meta para iPhone que maneja la rotación correctamente?

Question

Así que he estado usando:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

para que mi contenido HTML se muestre bien en el iPhone. Funciona muy bien hasta que el usuario gira el dispositivo al modo horizontal, donde la pantalla permanece restringida a 320 px.

¿Hay una manera simple de especificar una ventana gráfica que cambie en respuesta a que el usuario cambie el orientación del dispositivo? ¿O debo recurrir a Javascript para manejar eso?

Answer 1

Solo estaba tratando de resolver esto yo mismo, y la solución que se me ocurrió fue:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Esto parece bloquear el dispositivo en la escala 1.0 independientemente de su orientación. Sin embargo, como efecto secundario, deshabilita por completo la escala del usuario (pellizcar el zoom, etc.).

Answer 2

Para cualquiera que todavía esté interesado:

http://wiki.phonegap.com/w/page / 16494815 / Preventing-Scrolling-on-iPhone-Phonegap-Applications

Desde la página:

<meta name="viewport" content="user-scalable=no,width=device-width" />

  

Esto le indica a Safari que evite   el usuario de acercarse a la página   con el "pellizco" gesticula y arregla el   ancho del puerto de vista al ancho de   la pantalla, cualquiera que sea la orientación del   iPhone está en.

Answer 3

No desea perder la opción de escalado de usuario si puede evitarlo. Me gusta esta solución JS de aquí .

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

Answer 4

Se me ocurrió un enfoque ligeramente diferente que debería funcionar en plataformas cruzadas

http: //www.jqui .net / tips-tricks / Fix-the-auto-scale-on-mobile-devices /

Hasta ahora he probado en

Samsun galaxy 2

• Samsung galaxy s
• Samsung galaxy s2
• Samsung Galaxy Note (pero tuvo que cambiar el CSS a 800px [ver más abajo] *)
• Motorola

• iPhone 4

  • @media screen y (max-width: 800px) {

Este es un gran avance con el desarrollo móvil ...

Answer 5

Lo está configurando para que no pueda escalar (escala máxima = escala inicial), por lo que no puede escalar cuando gira al modo horizontal. Establezca maximum-scale = 1.6 y se escalará correctamente para ajustarse al modo horizontal.

Answer 6

Tuve este problema yo mismo, y quería poder establecer el ancho y hacer que se actualizara al girar y permitir al usuario escalar y hacer zoom en la página (la respuesta actual proporciona la primera pero evita la posterior como efecto secundario) ... así que se me ocurrió una solución que mantiene el ancho de vista correcto para la orientación, pero aún permite el zoom, aunque no es súper sencillo.

Primero, agregue el siguiente Javascript a la página web que está mostrando:

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

Luego, en su - (vacío) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation, agregue:

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

Se pueden realizar ajustes adicionales modificando más configuraciones de contenido de la vista:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone-- iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

Además, entiendo que puede poner un oyente JS para onresize o algo así como para activar el cambio de escala, pero esto funcionó para mí ya que lo estoy haciendo desde los marcos de la interfaz de usuario de Cocoa Touch.

Espero que esto ayude a alguien :)

Answer 7

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

admite todos los iPhones, todos los ipads, todos los androides.

Answer 8

solo quiero compartir, he jugado con la configuración de la ventana gráfica para mi diseño receptivo, si configuro la escala máxima en 0.8, la escala inicial en 1 y escalable a no, obtengo la vista más pequeña en modo vertical y la vista de iPad para el paisaje: D ... este es un truco desagradable pero parece funcionar, no sé por qué, así que no lo usaré, pero resultados interesantes

<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />

disfruta :)

Answer 9

¿Por qué no simplemente recargar la página cuando el usuario gira la pantalla con javascript?

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);