javascript - rotacion - iPad no activa eventos de cambio de tamaño de vertical a horizontal?

rotacion de pantalla iphone 7

Question

¿Alguien ha notado este comportamiento? Intento escribir un script que se active cuando cambie el tamaño. Funciona bien en los navegadores normales, funciona bien en el iPhone, pero en el iPad, solo disparará desde la ventana horizontal a la vertical, y no viceversa.

Aquí está el código:

$(window).resize( function() {
var agent=navigator.userAgent.toLowerCase();
var is_iphone = ((agent.indexOf(''iphone'') != -1));
var is_ipad = ((agent.indexOf(''ipad'') != -1));
if(is_iphone || is_ipad){
location.reload(true);
} else {
/* Do stuff. */
};
});

Answer 1

1. haga un buen control si su plataforma es iPad,

2. manejar la orientación del evento específico de iOScambiando ventana.onorientacióncambiar

   if(navigator.platform == ''iPad'') {
   window.onorientationchange = function() {
   // handle orientationchange event
   // (here you can take advantage of the orientation property
   // - see the good answer above by Vincent)
   }
   }

Answer 2

Creo que lo que quieres es usar el iPad Orientation CSS , que se ve así:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

Además, el evento de cambio de orientationchange se activa cuando se cambia la orientación, de acuerdo con los consejos de desarrollo web del iPad .

Juntos, eso debería darte herramientas suficientes para lidiar con el cambio.

Answer 3

Esto incluye todas las orientaciones.

Aquí hay dos opciones:

window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}

o

// Checks to see if the platform is strictly equal to iPad:
if(navigator.platform === ''iPad'') {
window.onorientationchange = function() {
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0) {
// iPad is in Portrait mode.
} else if (orientation === 90) {
// iPad is in Landscape mode. The screen is turned to the left.
} else if (orientation === -90) {
// iPad is in Landscape mode. The screen is turned to the right.
} else if (orientation === 180) {
// Upside down portrait.
}
}
}

Answer 4

Si te entendí correctamente, querrás hacer algo cuando el usuario incline el iPad. Aqui tienes:

window.onorientationchange = function(){
var orientation = window.orientation;
// Look at the value of window.orientation:
if (orientation === 0){
// iPad is in Portrait mode.
}
else if (orientation === 90){
// iPad is in Landscape mode. The screen is turned to the left.
}
else if (orientation === -90){
// iPad is in Landscape mode. The screen is turned to the right.
}
}

Answer 5

Verifica tu versión de iOS.

El evento "orientationchange" no funciona en iOS 3. *, pero sí en 4. *

Answer 6

Lo único que pude encontrar de manzana :

Safari en iPad y Safari en iPhone no tienen ventanas de tamaño variable. En Safari para iPhone y iPad, el tamaño de la ventana se establece en el tamaño de la pantalla (menos los controles de la interfaz de usuario de Safari) y el usuario no puede cambiarlo. Para moverse por una página web, el usuario cambia el nivel de zoom y la posición de la ventana gráfica al hacer doble clic o pellizcar para acercar o alejar, o al tocar y arrastrar para desplazarse por la página. A medida que un usuario cambia el nivel de zoom y la posición de la ventana gráfica, lo hace dentro de un área de contenido visible de tamaño fijo (es decir, la ventana). Esto significa que los elementos de la página web que tienen su posición "fija" en la ventana gráfica pueden terminar fuera del área de contenido visible, fuera de la pantalla.

Entiendo la parte "funciona en el iPhone" ... ¿pero quizás ya no funciona? Esto podría ser un cambio en OS / Safari móvil desde el lanzamiento de la última versión pública de iPhone OS (la documentación anterior es de marzo de 2010).

Voy a volver a etiquetar esta pregunta agregando iPhone, tal vez uno de los tipos con la versión del desarrollador 4.0 OS pueda probar esto? Si es el caso, ha sido eliminado, esto debería ser un error archivado / arreglado antes de que se active ... No estoy seguro de cómo están los procedimientos con Apple.

Answer 7

Desea esta solución para el error de orientación en iphone y ipad. lea sobre esto aquí: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

La última versión de github aquí: https://gist.github.com/901295 usa la segunda versión en la página.