Résolution du iPhone/iPod/iOS

Selon la documentation de Apple, la taille de l'écran est de 320px x 480 px en mode portrait. 480x320px en mode paysage. Or dans le navigateur Safari, il faut enlever la barre d'adresse, d'outil, etc. La taille visible sur la première page est de 320px x 356px (portrait) et 480x208px (paysage).

Hauteur: 480-20-60-44 = 356px. On ajoute 60px si la barre d'adresse n'est pas visible (lorsqu'on défile la page).

Résolution du iPad

Portrait: 768x1024 (majorité des vues sur les sites de tourisme en portrait et non en paysage comme sur un ordinateur)

/* ipad paysage 1024x768 */
@media only screen and (max-width: 1024px) {
    
}

/* ipad portrait 768x1024 */
@media only screen and (max-width: 768px) {
    
}

Viewport du iPhone/iPod

Bien que la taille de l'écran soit 320px, le viewport change selon les instructions HTML <meta> et la grosseur du contenu de la page.

Sans aucun meta, le viewport dans Safari est de 980px. On peut changer le viewport en utilisant la balise <meta/>

<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=590"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="initial-scale=2.3, user-scalable=no"/>
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no"/>
  • width = device-width|{number} : largeur du viewport (propriété css auto). Si on indique device-width, la largeur est de 320px pour le ipod/iphone.
  • initial-scale = {float} : taille initiale (si on ne le précise pas, safari peut changer le zoom. Cependant, la propriété css auto sera toujours la même mais la propriété width=100% sera modifiée.
  • user-scalable yes|no : indique si on permet à l'usager de changer le zoom
  • maximum-scale = {float} :
  • minimum-scale = {float} :

Note les propriétés sont séparées par des virgules ou par des point-virgules

CSS

Il existe plusieurs moyens de cibler le ipod touch/iphone avec les expressions de CSS3. On peut l'utiliser dans la feuille CSS ou dans la balise <link>

  • min-device-width: {width}px : cible tout ce qui est plus grand ou égale à une largeur
  • max-device-width: {width}px : cible tout ce qui est plus petit ou égale à une largeur
  • html {-webkit-text-size-adjust:none} : ???

Exemples

balise head:
 <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet" />
 <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet" />

balise style ou fichiers css:
 @media screen and (max-device-width: 481px) { 
   // regle css pour ordinateur
   body { color: black; }
   a { color: blue; }
 }
 @media screen and (min-device-width: 481px) { 
   // regles css pour iphone/ipod touch
   body { color: black; }
   a { color: blue; }
 }

Test avec ipod touch

Voir aussi: device-ipodtouch.txt

test 1: sans viewport <meta name="viewport" content="width=device-width" />
Résultat: width:auto =~ 980px, width:100% = 1000px
Conclusion: si tout est plus <= 980px, affiche 980px, sinon agrandit jusqu'à 1000px.
note: si 1800px, le auto =~ 980px mais le width: 950px;

test 2: avec viewport <meta name="viewport" content="width=device-width" />
Résultat: width:auto =~ 305px. width:100% = 475px
Conclusion: si tout est plus <= 305, alors affiche 305px, sinon agrandit à 475px.
note: si 1800px, le auto =~ 305px, width: 550px

test 3 sans viewport, Rotation 90%
Résultat: width:auto = ~980px, width: 1800px;

test 4 avec viewport, Rotation 90%
si 1800px, le auto =~ 305px, width: 650px;

Autres balises HTML

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"/>
<link rel="apple-touch-startup-image" href="startup.png" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Mobile / google

1. soumettre m.domain.com avec les outils webmasters

2. site map: Add mobile URL information to a Sitemap

<?xml version="1.0" encoding="UTF-8" ?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
    <url>
        <loc>http://m.siteweb.com/</loc>
        <mobile:mobile/>
    </url>
</urlset>

3. annotation

Sur la version originale - page d'accueil:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.siteweb.com/" />

Sur la version mobile - page d'accueil:

<link rel="canonical" href="http://www.siteweb.com/" />

Barre d'adresse

Cacher la barre d'adresse

Déplacer la barre de défilement de 1px vers le bas en javascript

<script>
window.addEventListener("load",function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0); });
</script>

Meta

<meta name="apple-mobile-web-app-capable" content="yes" />

Source: Hide the Address Bar within Mobile Safari, by David Walsh

Hyperliens...

Lire les commentaires | Laisser un commentaire