Javascript Girl
  1. Javascript Girl
  3. Js / jQuery peut-il déterminer l'orientation de l'iPhone?
Intereting Posts
L'importation ES2015 ne fonctionne pas (même au niveau supérieur) dans Firefox Cliquez sur le gestionnaire sur l'élément <svg> Exécuter un fichier exe à l'aide de node.js Graphique de données en temps réel Asp.net ajax 4.0 templates client, comment lier un choix? Différencier +0 et -0 Spécifiez la plage de nombres à saisir dans le champ numéro à l'aide de javascript Javascript / jQuery – Comment puis-je obtenir le nom de la classe d'élément cliqué? SpeechSynthesis API onend callback ne fonctionne pas Numéro d'alerte Javascript commençant par 0 Crossfilter nécessite-t-il une structure de données à plat? Pourquoi la comparaison des chaînes au nombre fonctionne-t-elle en Javascript? Comment puis-je obtenir une entrée de console dans javascript? Chart.js charge des données totalement nouvelles Test de performance du site Web: quelle est la meilleure façon de rapprocher les performances de l'ordinateur?

Js / jQuery peut-il déterminer l'orientation de l'iPhone?

Par curiosité, j'ai joué avec jQuery pour déterminer la taille de l'écran du navigateur, et il m'est apparu que la taille de l'écran pourrait être utilisée pour déterminer si un visiteur utilisait ou non un iPhone / iTouch pour afficher le site.

J'ai donc utilisé ce qui suit pour vérifier ceci: 

$(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'); } } );

Lors de la visualisation de la page via iPhone, je remarque que les dimensions sont cohérentes (quelle que soit l'orientation):

X: 320, y: 396

Ceci est indépendamment de l'orientation. Je n'ai pas encore essayé d'utiliser un événement onChange pour détecter les changements (principalement parce que je suis encore si nouveau chez jQuery), mais je me demandais s'il existait un moyen de déterminer, via jQuery ou javascript simple, l'iPhone / L'orientation de iTouch?

Window.orientation vous donnera un nombre entier qui indique la rotation. Vous pouvez écouter les changements d'orientation en ajoutant un événement au corps: 

 <body onorientationchange="updateOrientation();">

Modifié par OP, juste sur le hasard que le lien meurt ou se déplace à un moment donné … 

 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; } });

modifier:

Bien que cela soit correct pour l'iPhone, il se peut qu'il ne fonctionne pas correctement dans d'autres appareils.

Je voudrais ajouter des informations que j'ai trouvées à http://phoboslab.org/log/2012/06/x-type-making-of

Et son exemple est plus compatible avec le navigateur / périphérique.

Mobile Safari et Chrome prennent en charge l'événement orientationchange, ce qui rend cela facile. Cependant, nous ne pouvons pas compter sur window.orientation, qui indique la rotation en degrés (0, 90, 180 ou 270), car certains appareils signalent 0 ° pour le mode portrait, tandis que d'autres signalent 0 ° pour le paysage. Comme c'est pratique!

La solution consiste à vérifier si la hauteur de la fenêtre est supérieure à la largeur – si c'est le cas, nous sommes évidemment en mode portrait! Mais comme cela serait trop simple, Chrome's Browser offre un autre défi pour nous: il ne présente que les dimensions de la fenêtre après avoir déclenché l'événement d'orientationchange. Nous écoutons donc l'échange d'orientation et le redimensionnement des événements. Soupir. 

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

Voir «Manipulation des événements d'orientation» de http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1

Téléphones mobiles / TABLETES SEULEMENT 

 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; }

Cela ne fonctionne que pour les téléphones et les tablettes ! L'orientation de base (cas 0) diffère entre les comprimés. Le cas Samsung 0 est un paysage, le cas iPad 0 est un portrait.

J'ai essayé une approche similaire pour les tableaux multiplate-forme en utilisant .height () et .width () et ensuite en comparant ce qui est plus grand. Il fonctionne dans iOS5 (testé sur Ipad2) et BlackBerry Rim, mais apparemment pas sur Android (3.2 et 4.0.3). Sur Android, la première fois qu'il charge le site, il me donne la bonne hauteur et la largeur, mais puis, en modifiant l'orientation de l'écran, il est toujours derrière.
Ex. En utilisant les dimensions 800×1200 en mode portrait:
H: 1200 w: 800 (portrait)
H: 1200 w: 800 (paysage)
H: 800 w: 1200 (portrait)
H: 1200 w: 800 (paysage)

En regardant, j'ai trébuché sur cette solution avec CSS3:
Comment utiliser javascript conditionnellement comme les requêtes médias CSS3, l'orientation?
C'est probablement mieux que de peaufiner la solution Js.