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


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 320px.

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


76
2017-08-04 21:27


origen


Respuestas:


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. Como efecto secundario, sin embargo deshabilita completamente la escala del usuario (zoom de pellizco, etc.).


108
2018-06-03 04:03



Para cualquiera que esté interesado:

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

De la página:

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

Esto instruye a Safari para prevenir   el usuario de acercarse a la página   con el gesto de "pellizcar" y arregla el   ancho del puerto de vista al ancho de   la pantalla, cual sea la orientación del   iPhone está adentro.


18
2018-01-06 07:02



No puede perder la opción de escala 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>

10
2017-11-14 09:29



He encontrado un enfoque un tanto 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

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 avance masivo con el desarrollo móvil ...


2
2017-11-05 11:45



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.


1
2017-08-07 00:24



Tuve este problema yo mismo, y quería poder establecer el ancho y tenerlo actualizado al rotar y permitir al usuario escalar y hacer zoom en la página (la respuesta actual proporciona la primera pero previene la posterior como un 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 hacer zoom, aunque no es súper directo.

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 - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation method, 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 puede hacer ajustes adicionales modificando más configuraciones de contenido de 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 puedes poner un oyente JS para onresize o algo así como para desencadenar el cambio de escala, pero esto funcionó para mí, ya que lo estoy haciendo desde los marcos de interfaz de usuario de Cocoa Touch.

Espero que esto ayude a alguien :)


1
2018-03-15 00:39



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

soporte todos los iphones, todos los ipads, todos los androides.


0
2018-02-11 07:38



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

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

disfrutar :)


-1
2018-04-01 14:33



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

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

window.addEventListener('orientationchange', doOnOrientationChange);

-1
2018-01-12 16:41