Oneiric

Salut,

Aujourd’hui une petite note technique, car c’est aussi pour ce genre de choses que j’ai relancé mon blog ; je crois avoir un peu plus de choses à dire qu’à l’époque où je connaissais rien à la programmation (j’en connais un peu plus maintenant, même si je suis loin d’être un professionnel…).

Alors, c’est simple : pour mon stage je réalise en ce moment un site Web version iPhone. C’est très bien, mais c’est parfois assez difficile à dimensionner.

Par défaut, une page web s’exécute sur l’iPhone avec une largeur de 980 pixels – autant dire que c’est complètement fantaisiste par rapport à la largeur native de l’iPhone (320 pixels si on est en mode “portrait”, 480 si on est en mode “paysage”).

Comment donc faire, pour bien dimensionner son site iPhone : la réponse, vous la trouverez un peu partout, c’est de réaliser des classes CSS avec un attribut : on pourra trouver un exemple ainsi que d’autres petites infos là par exemple.

Le problème que j’ai rencontré n’est pas vraiment détaillé dans cette page web, je vais donc vous le faire très facilement : ma volonté, c’était que mon texte, ainsi que les autres éléments de ma page (images, etc.), aient exactement le même aspect que ce soit en mode paysage ou portrait.

J’avais donc fait les CSS qui allaient bien avec ma page Web, avec la largeur de 320 pixels ou 480 pixels selon le cas portrait/paysage… ça me donnait quelque chose comme cela :

body
{
   margin:0px;
   padding:0px;
   -webkit-text-size-adjust:none;
}

body[class="paysage"] .divGlobal
{
   width:480px;
   height:268px;
   position:relative;
   -webkit-tap-highlight-color : rgba(255,255,255,0);
   border:solid 3px #960E1C;
}

body[class="portrait"] .divGlobal
{
   width:320px;
   height:416px;
   position:relative;
   -webkit-tap-highlight-color : rgba(255,255,255,0);
   border:solid 3px #960E1C;
}

Avec le javascript suivant, ca aurait donc du fonctionner :

function updateOrientation() {
   var className;
   switch(window.orientation) {
      case 0:
         className = "portrait";
         break;
      case -90:
         className = "paysage";
         break;
      case 90:
         className = "paysage";
         break;
      case 180:
         className = "portrait";
         break;
      default:
         className = "portrait";
         break;
   }
   document.body.setAttribute("class", className);
}

function orientationChangeHandler()
{
   updateOrientation();
   setTimeout( function() { window.scrollTo(0,1); },100);
}

window.onorientationchange=orientationChangeHandler;

Mais non, ça ne fonctionnait pas… enfin, plutôt, ca marchait – la CSS était bien changée, pas de souci. Mais la zone visible restait telle qu’elle était définie au départ, c’est à dire à 320 pixels, par l’instruction suivante dans la balise head de ma page :

Comme c’est expliqué sur cette page, la propriété initial-scale permet normalement d’être comme il faut. Mais ce n’est le cas que lors du premier chargement de la page – dès qu’on fait un changement d’orientation, la largeur du viewport n’est pas changée.

C’est là que les ressources Web m’ont alors induit en erreur. Comme l’indique le premier lien que je vous ai signalé en début de post, ainsi que moult autres sources, on nous propose de changer, en utilisant javascript, le viewport avec quelque chose de ce style :

document.getElementById("viewport").setAttribute("content", "user-scalable=no;", false);

Oui, sauf qu’en fait, ça, aux dernières nouvelles… ça ne marche pas. Après pas mal de réflexion et de tests sous Safari version Desktop, j’ai compris de quoi il s’agissait – en fait, la façon dont est géré la méthode getElementByID sous Safari a du changer avec le changement de version (Firmware 3.0 peut être ?).

J’ai donc changé le code de cette manière, et cela fonctionne maintenant (ajouter sur l’évènement onorientationchange) :

//changement du viewport
var metaTagViewport = document.getElementsByName('viewport')[0];
if (metaTagViewport !=null)
{
   if (className=="portrait")
   {
      metaTagViewport.setAttribute("content", "width = device-width, minimum-scale=1.0, maximum-scale=1.0", false);
   }
   else if (className=="paysage")
   {
      metaTagViewport.setAttribute("content", "width = device-height, minimum-scale=1.0, maximum-scale=1.0", false);
   }
}

Voilà, le résultat est visible sur http://longlife1st.free.fr/test-viewport/test-viewport.html.