WebKit

© Quesaco. Dernier ajout dans cette rubrique : 11 février 2009.

Science sans conscience n’est que ruine de l’âme. François Rabelais


Mots-clés

iPod,iPhone / WebKit

Détecter l’orientation de l’écran

Objectif : détecter l’orientation de l’écran de iPod ou iPhone dès le chargement de la page et adapter la mise en page via CSS.

Testé/validé sur iPod touch v.2.2.1

Les orientations de iPod/iTunes

Il est possible de demander à Safari qu’elle est l’orientation actuelle de l’écran de iPod.

En javascript :

alert(window.orientation);

Trois résultats possibles :

  • 0 : « portrait ». iPod est en position verticale ;
  • -90 ou 90 : « paysage ». iPod est en position horizontale (bouton menu à gauche dans le premier cas, à droite dans le second).

Détecter l’orientation au démarrage

Il suffit d’attendre l’évènement onload de la page et d’appliquer une classe ou un attribut à un des éléments. Dans l’exemple donné ici, c’est l’attribut orientation qui est ajouté à l’élément body.

Le code CSS (couleur de fond différente, selon la position/orientation de l’écran) :

<style type='text/css' media='screen'>
body[orientation="portrait"] {
        background-color:#00ff00;
}
body[orientation="paysage"] {
        background-color:#ff00ff;
}
</style>

Le mieux est de placer les feuilles de style dans un fichier et d’appeler ce fichier css par une ligne dans le head, du style :

<link href="_screen-iphone.css})" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />

Détecter l’orientation pendant la lecture

L’évènement onorientationchange permet de détecter la modification de l’orientation de l’écran. Il ne reste donc plus qu’à attacher cet évènement à la fonction qui modifiera l’attribut de l’élément sélectionné plus haut.

En jQuery, ça donne :

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
       
        // si iPhone ou iPod ou autre compatible WebKit
        if (navigator.userAgent.match(/webkit/i)) {
               
                jQuery.extend({
                        getorientation: function() {
                                return ((Math.abs(window.orientation) == 90) ? "paysage" : "portrait");
                        }
                });
               
                jQuery.fn.extend({
                        setorientation: function(){
                                $(this).attr("orientation", $.getorientation());
                        }
                });
               
                // onload ? ajouter attribut correspondant a body
                $('body').setorientation($.getorientation());
               
                // evenement: nouvelle orientation ?
                window.onorientationchange = function(){
                       
                        $('body').setorientation($.getorientation());
                       
                        // faire avancer d'une ligne (cache la barre url)
                        window.scrollTo(0, 1);
                }
        }
});    
//]]>
</script>

Sur le Web