javascript - force - ¿Puede js/jQuery determinar la orientación del iPhone?
orientationchange jquery (5)
Por curiosidad, he estado jugando con jQuery para determinar el tamaño de la pantalla del navegador, y se me ocurrió que el tamaño de la pantalla podría usarse para determinar si un visitante estaba usando un iPhone / iTouch para ver el sitio.
Así que usé lo siguiente para probar esto:
$(document).ready(
function() {
var screenX = screen.width,
screenY = screen.height;
alert("X: " + screenX + " Y: " + screenY);
if (screenX == 320 && screenY == 396) {
$(''div#wrap'').css(''background-color'',''#f00'');
}
else if (screenY == 320 && screenX == 396) {
$(''div#wrap'').css(''background-color'',''#0f0'');
}
}
);
Al ver la página a través de iPhone, observo que las dimensiones son consistentes (independientemente de la orientación):
x: 320, y: 396
Esto es independientemente de la orientación. Todavía no he intentado usar un evento onChange para detectar cambios (principalmente porque todavía soy tan nuevo en jQuery), pero me pregunté si habría una forma de determinar, a través de jQuery o el JavaScript simple, el iPhone / ¿La orientación de iTouch?
SÓLO TELÉFONOS / TABLETAS
switch ( window.orientation ) {
case 0:
alert(''portrait mode'');
break;
case 90:
alert(''landscape mode screen turned to the left'');
break;
case -90:
alert(''landscape mode screen turned to the right'');
break;
}
¡Esto solo funciona para teléfonos y tabletas ! La orientación básica (caso 0) difiere entre tabletas. Samsung caso 0 es horizontal, iPad caso 0 es retrato.
Consulte "Manejo de eventos de orientación" en https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
Probé un enfoque similar para tabletas multiplataforma utilizando .height () y .width () y luego comparé cuál es más grande. Funciona en iOS5 (probado en Ipad2) y BlackBerry Rim pero aparentemente no en Android (3.2 y 4.0.3). En Android, la primera vez que se carga el sitio, me da la altura y el ancho correctos, pero al cambiar la orientación de la pantalla siempre está un paso atrás.
Ex. utilizando las dimensiones 800x1200 comenzando en modo retrato:
h: 1200 w: 800 (retrato)
h: 1200 w: 800 (paisaje)
h: 800 w: 1200 (retrato)
h: 1200 w: 800 (paisaje)
Mirando, tropecé con esta solución con CSS3:
¿Cómo utilizar javascript condicionalmente como consultas de medios CSS3, orientación?
Esto es probablemente mejor que ajustar la solución de Js.
window.orientation le dará un número entero que denota la rotación. Puedes escuchar los cambios de orientación agregando un evento al cuerpo:
<body onorientationchange="updateOrientation();">
Editado por OP, solo en el caso de que el enlace muera o se mueva en algún momento ...
Value | Description
-------+-------------------------------------------------------------------------------
0 | Portrait orientation. This is the default value.
-90 | Landscape orientation with the screen turned clockwise.
90 | Landscape orientation with the screen turned counterclockwise.
180 | Portrait orientation with the screen turned upside down. This value is currently not supported on iPhone.
jQuery(window).bind(''orientationchange'', function(e) {
switch ( window.orientation ) {
case 0:
alert(''portrait mode'');
break;
case 90:
alert(''landscape mode screen turned to the left'');
break;
case -90:
alert(''landscape mode screen turned to the right'');
break;
}
});
editar:
Si bien esto está bien para el iPhone, es posible que no funcione correctamente en otros dispositivos.
Me gustaría agregar alguna información que encontré en http://phoboslab.org/log/2012/06/x-type-making-of
Y su ejemplo es más compatible con otros navegadores / dispositivos.
Mobile Safari y Chrome son compatibles con el evento de cambio de orientación, lo que facilita esta tarea. Sin embargo, no podemos confiar en window.orientation, que reporta la rotación en grados (0, 90, 180 o 270), porque algunos dispositivos reportan 0 ° para el modo retrato, mientras que otros reportan 0 ° para el paisaje. ¡Que conveniente!
La solución es simplemente verificar si la altura de la ventana es más grande que el ancho; si es así, ¡obviamente estamos en modo retrato! Pero como esto sería demasiado fácil, el navegador de Chrome nos ofrece otro desafío: solo actualiza las dimensiones de la ventana después de que se haya activado el evento de cambio de orientación. Así que escuchamos para orientación cambiar y redimensionar eventos. Suspiro.
var wasPortrait = -1;
var checkOrientation = function() {
var isPortrait = (window.innerHeight > window.innerWidth);
if( isPortrait === wasPortrait ) { return; // Nothing to do here }
wasPortrait = isPortrait;
// Do your stuff...
};
window.addEventListener( ''orientationchange'', checkOrientation, false );
window.addEventListener( ''resize'', checkOrientation, false );