para - iPhone Safari no vuelve a escalar automáticamente en retrato-> paisaje-> retrato

safari windows 10

Question

Tengo una página HTML muy simple con esta etiqueta META para iPhone:

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

Usando el iPhone Safari, cuando la página se carga en modo vertical, se ve bien y el ancho se ajusta a la pantalla. Cuando giro el iPhone al modo horizontal, la página web se cambia automáticamente de tamaño para ajustarse al ancho del paisaje. Bueno, esto es lo que quiero.

Pero cuando giro desde el paisaje, la página no se redimensiona para ajustarse al ancho del retrato como lo estaba antes. Permanece en el ancho del paisaje.

Quiero que el iPhone lo ajuste al ancho correcto automáticamente, al igual que lo hizo para el modo horizontal. No creo que esto deba involucrar a los oyentes de orientación porque todo se hace automáticamente y no tengo ningún estilo especial para los diferentes modos.

¿Por qué el iPhone no cambia el tamaño de la página web en modo vertical? ¿Cómo puedo solucionar esto?

ACTUALIZAR

Logré hacer que el iPhone se redimensionara automáticamente, pero con el extraño fenómeno de hacerlo solo después de un número par de rotaciones ... Muy, muy extraño.
Yo uso esta etiqueta META:

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

Esto es lo que tengo que hacer para obtener el cambio de tamaño automático:
1. En carga en retrato -> se ve bien.
2. Girar hacia el paisaje -> redimensionado para adaptarse a la pantalla.
3. Gire de nuevo a retrato -> sin redimensionar.
4. Gire hacia el paisaje -> aún en tamaño para el paisaje.
5. Gire a vertical -> redimensionado hacia abajo para adaptarse a la pantalla de retrato.

¿Alguien puede explicar este comportamiento?
Todavía quiero saber cómo solucionar esto y agradecer cualquier ayuda.

¡Gracias!
Tom.

Answer 1

¿Estás usando XHTML en lugar de HTML?

Pruebe esto, asegurándose de cerrar correctamente su primera meta .

<meta name="viewport" content ="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

Answer 2

Este es un error en Safari en iOS 5 e inferior (AKA Safari Viewport Scaling Bug).

Intenta evitar la corrección con etiquetas de metadatos que deshabilitan el gesto de zoom; en su lugar, use esta corrección de JavaScript:
https://gist.github.com/901295

Más información sobre este error: http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug

Answer 3

Esto tiene que ser un error en iOS 4 Safari. Este es mi comportamiento con las siguientes metaetiquetas (la segunda es hacerla en pantalla completa):

<meta name="viewport" content="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

La página se escalaría correctamente al pasar de vertical a horizontal hasta que use el teclado emergente para ingresar un valor en un campo; luego dejaría de escalar. Lo que significaría que si utilizara el teclado en el paisaje sería demasiado grande cuando fuera al retrato, o viceversa.

Cambiar el uso de las siguientes metaetiquetas lo solucionó ... Gracias a las otras respuestas en esta página.

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

Answer 4

Estoy usando ExtJs (tacto sencha), parece bueno

Ext.setup({
tabletStartupScreen: ''images/tablet_startup_768x1004.png'',
phoneStartupScreen: ''images/phone_startup_320x460.png'',
tabletIcon: ''images/tablet_icon_72x72.png'',
phoneIcon: ''images/phone_icon_72x72.png'',
icon: ''images/icon_72x72.png'',
statusBarStyle: ''black'',
glossOnIcon: true,
fullscreen: true,
onReady: function() {
var viewport = null;
var metas = document.getElementsByTagName(''meta'');
for(var i = 0, length = metas.length; i < length; ++i){
var meta = metas[i];
// already Extjs addedMetaTags
if(meta.name == ''viewport''){
viewport = Ext.get(meta);
break;
}
}
if(null == viewport){
viewport = Ext.get(document.createElement(''meta''));
}
if(window.navigator.standalone){
// IMPORTANT!!! not set to height=device-height when iphone standalone mode was ignored "scale" settings
viewport.set({
name: ''viewport'',
content: ''width=device-width, initial-scale=0.1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no''
});
} else {
// IMPORTANT!!! set to height=device-height when !standalone mode; behav window.innerHeight = fullscreen size
viewport.set({
name: ''viewport'',
content: ''height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no''
});
}
}
});

otros dispositivos compatibles con ...

var watcher = {
handlers: [],
dimentions: {width:0, height: 0},
fullscreenize: false,
orientLandscape: function (){
return 90 === Math.abs(window.orientation);
},
orientPortrait: function (){
return !this.orientLandscape();
},
width: function (){
return this.dimentions.width;
},
height: function (){
return this.dimentions.height;
},
changeDimentions: function (evt){
var self = this;
(function (){
if(self.fullscreenize){
window.scrollTo(0, 1);
}
self.dimentions = Ext.Element.getViewSize();
self.fireOnchange();
}).defer(100);
},
init: function (){
if(''onorientationchange'' in window){
Event.observe(window, ''orientationchange'', this.changeDimentions.bind(this));
} else {
Event.observe(window, ''resize'', this.changeDimentions.bind(this));
}
Event.observe(window, ''load'', this.changeDimentions.bind(this));
},
fullScreen: function (){
this.fullscreenize = true;
var self = this;
document.observe(''dom:loaded'', function (){
(function (){
window.scrollTo(0, 1);
self.changeDimentions();
}).defer(100);
});
},
fireOnchange: function(){
var self = this;
self.handlers.each(function (handler){
handler.apply(null, [self]);
});
},
onchange: function (handler){
this.handlers.push(handler);
}
};
watcher.init();
watcher.fullScreen();
aComponent = Ext.extend(Ext.Component, {
initComponent: function (){
watcher.onchange(this.fullscreen.bind(this));
},
fullscreen: function (){
var height = watcher.height();
var width = watcher.width();
this.menu.setHeight(40);
this.mainPanel.onResize(height - 40, width);
}
});

Answer 5

Necesitas poner una cosa más minimum-scale=1.0 por lo que te gustaría:

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

Answer 6

Simplemente configure la directiva viewport para ...

<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />

... no necesita usar JavaScript y aún puede permitir que el usuario escale la página si lo desea.

Answer 7

También enfrentamos el mismo problema en JQuery Mobile 1.3.0, usamos el siguiente y funcionó

// en css

cuerpo {/ * La orientación de la página del IOS cambia el tamaño del problema * /
-webkit-text-size-adjust: ninguno; }

y si aún el encabezado / pie de página no cambia el tamaño correctamente (opcional)

$ (ventana) .resize (function () {$ ("div [data-role = header]"). width ($ (ventana) .width ()); $ ("div [data-role = footer]") .width ($ (ventana) .width ());});

Answer 8

También me topé con el problema de ''no retroceder cuando volví al retrato''.

Lo tengo trabajando con

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

para la escala básica de ida y vuelta, en 3G con iOS 4, a medida que cambio de orientación.

Originalmente usé "minimum-scale = 1.0", lo puse a funcionar cuando lo reemplacé con "initial-scale = 1.0", después de ver las sugerencias aquí.

Answer 9

Tuve el mismo problema con mi iPhone 5. La respuesta fue increíblemente simple.

<meta name="viewport" content="width=device-width" />

Esto muestra correctamente la página en cualquier vista, todo el tiempo, y ofrece escalabilidad.

Answer 10

Tuve el mismo problema en mi 3GS 3.1.3, aunque no pude volver a tener el tamaño correcto nuevamente después del modo horizontal. Pero cuando eliminé "height = device-height", la página se redujo cada vez. Entonces mi meta se ve así:

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

Me gustaría poder usar el atributo de altura para bloquear la altura, pero parece que no se mezclan demasiado bien.

Answer 11

prueba este <meta name="viewport" content="width=1024" />