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

meta viewport user-scalable

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 en modo horizontal, donde la pantalla permanece restringida a 320px.

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

Answer 1

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

function doOnOrientationChange()
{
location.reload();
}
window.addEventListener(''orientationchange'', doOnOrientationChange);

Answer 2

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

Answer 3

He encontrado un enfoque un tanto diferente que debería funcionar en plataformas cruzadas

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

Answer 4

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 5

No puede perder la opción de escala de usuario si puede evitarlo. Me gusta esta solución JS desde 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

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 indica a Safari que evite que el usuario haga un acercamiento a la página con el gesto de "pellizcar" y corrige el ancho del puerto de visualización con el ancho de la pantalla, independientemente de la orientación que tenga el iPhone.

Answer 7

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

Answer 8

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

Answer 9

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

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