¿Cómo configurar metadatos 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 conseguir mi contenido HTML para mostrar muy bien en el iPhone. Funciona perfectamente hasta que el usuario gira el dispositivo al modo horizontal, donde la pantalla permanece restringida a 320px.

¿Existe una manera simple de especificar una ventana que cambie en respuesta al cambio de la orientación del dispositivo ? ¿O debo recurrir a Javascript para manejar eso?

Answer 1

sólo estaba tratando de resolver esto a mí 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 1,0 escala, independientemente de su orientación. Como efecto secundario, sin embargo deshabilita completamente la escala del usuario (zoom de pellizco, etc.).

Answer 2

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 escalará adecuadamente para adaptarse al modo horizontal.

Answer 3

Para alguien sigue 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 indica a Safari para evitar al usuario de zoom en la página con el "pellizco" gesto y corrige el ancho de del puerto de vista al ancho de la pantalla, que nunca la orientación del iPhone está en.

Answer 4

tuve este problema a mí mismo, y quería tanto ser capaz de establecer el ancho, y tienen que actualizar en rotación y permitir al usuario a escala y zoom de la página (la corriente la respuesta proporciona la primera, pero previene la posterior como un efecto secundario) ... así que se me ocurrió una solución que mantiene el ancho de la vista correcto para la orientación, pero aún permite el acercamiento, aunque no es súper directo.

En primer lugar, añadir el siguiente JavaScript a la página web que está visualizando:

<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 - (void) didRotateFromInterfaceOrientation: Método fromInterfaceOrientation (UIInterfaceOrientation), añadir:

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

ajustes adicionales se puede hacer mediante la modificación de varias de las configuraciones de contenido viewportal:

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 desencadenar el cambio de escala, pero esto funcionó para mí, ya que estoy haciendo desde marcos de interfaz de usuario Cocoa Touch.

Espero que esto ayude a alguien :)

Answer 5

Usted no quiere perder la opción de escala de usuario si puede evitarlo. Me gusta esta solución JS de here.

<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 6

he llegado con un enfoque ligeramente diferente que debería funcionar en plataformas cruzadas

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

Hasta ahora he probado en el

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 and (max-width:800px) {

Este es un labio masivo hacia adelante con desarrollo móvil ...

Answer 7

solo quiero compartir, he jugado con las configuraciones de mi diseño receptivo, si configuro la escala Max en 0.8, la escala inicial en 1 y escalable en no, entonces obtengo la vista más pequeña en modo retrato y la vista del iPad para el paisaje: D ... esto es propiamente un truco feo, pero parece que funciona, no sé por qué, así que no lo va a utilizar, pero los resultados interesantes

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

gusta :)

Answer 8

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

soportar todos los iphones, todos los ipads, todos los androides.

Answer 9

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

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

window.addEventListener('orientationchange', doOnOrientationChange);