Définir les propriétés d’un site mobile
1ère règle pour créer un site Mobile : Fixer le Viewport
Le Viewport est une balise HTML méta qui va permettre de définir la résolution de votre page web pour les terminaux mobiles. Elle utilise les attributs name et content. Les valeurs acceptées sont disponibles ici. Cela permet ainsi de bloquer le redimensionnement automatique de la page qui fixe ainsi la largeur du mobile.
Sources :
Alsacréations, Journaldunet et adevby.me
http://www.catswhocode.com/blog/10-...
Propriétés width et height Ces propriétés définissent la largeur et la hauteur de votre page à afficher dans le viewport. La valeur par défaut de width est 980 (valeurs comprises entre 200 et 10 000), ce qui forcera Safari à agir tel un navigateur standard de 980 pixels de large. La valeur par défaut de height est proportionnelle à celle de width (de 223 à 10 000). Il est possible d’utiliser device-width ou device-height à la place d’une valeur pour ajuster l’affichage plein écran de la page. » Ouvrir une page en pleine largeur Adapter la largeur à l’écran du Mobile : » Ouvrir une page en pleine hauteur » Ouvrir une page en n’en afficher que 640 pixels Propriété initial-scale Cette propriété force un zoom par défaut sur la page lors de son ouverture. Par défaut le zoom est calculé au mieux pour afficher toute la page. » Ouvrir une page avec en zoomant 2 fois » Ouvrir une page sans zoom Propriétés minimum-scale et maximum-scale Cette propriété définie la valeur de zoom minimum et maximum. Les valeurs par défaut sont 0.25 (de 0.1 à 10) pour le minimum-scale et de 1.6 (0.1 à 10) pour maximum-scale. Pour afficher la page avec un niveau de zoom spécifique, utilisez :
(1.0 = sans zoom, 2.0 = zoom deux fois, ...) Les plages de zoom peuvent aussi être spécifiées :
(valeurs comprises entre 0.1 et 10) La propriété user-scalable Cette propriété interdit ou autorise l’utilisateur à zoomer sur la page. Par défaut à yes, elle accepte les valeurs yes (1) ou no (0). Interdire le zoom par l’utilisateur Il est à noter que les propriétés de ce metatag peuvent être le plus souvent cumulées. ...revient à écrire Donner le même aspect au mode Portrait et Paysage Éviter le redimensionnement automatique de la mise en page :<meta name="viewport" content="width=device-width"><meta name = "viewport" content = "width = device-width"><meta name="viewport" content="height=device-height"><meta name="viewport" content="width=640"><meta name="viewport" content="initial-scale=2.0"><meta name="viewport" content="initial-scale=1.0"><meta name="viewport" content="initial-scale=1.0"><meta name="viewport" content="minimum-scale=1.0"><meta name="viewport" content="maximum-scale=1.0"><meta name="viewport" content="user-scalable=no"><meta name="viewport" content="width=400, initial-scale=0.5" /><meta name="viewport" content="width=200, initial-scale=1.0" /><meta name="viewport" content="width=480, maximum-scale=0.6666" /><meta name="viewport" content="width=device-width" />
- Protéger ses scripts
- Défilement de Rubriques - Slide
- Galerie Flash XML
- Rotator flash
- Sliding Panel
- Galerie Photos
- Modèles page 404
- Template pour lettre d’infos
- Scripts Css+
- Formulaires
- Bibliothèque d’images
- Template pour Ipad
- kits graphiques HTML5
- Kit Iweb - IPHONE
- Exemples de scripts Ajax
- Créer des cartes GoogleMap
- Réaliser une carte Interactive GoogleMap
- Créer un flux RSS manuel ou automatique
- Affichage du contenu d’un flux RSS
- Créer un Sitemap Google pour votre site
- CSS3 media queries
2ème règle : Faire une feuille de style spéciale mobile
@media (max-width: 640px) {
/* passer tous les éléments de largeur fixe en largeur automatique */
body, element1, element2 {
width: auto !important;
margin: auto !important;
padding: auto !important;
}
/* fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */
img, table, td, blockquote, code, pre, textarea, input, object, embed, video {
max-width: 100% !important;
}
/* gestion des mots longs */
textarea, table, td, th, code, pre, samp {
word-wrap: break-word; /* césure forcée */
white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}
/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
element1, element2 {
float: none !important;
width: auto !important
}
/* masquer les éléments superflus */
.hide_mobile {
display: none !important;
}
/* Un message personnalisé */
body:before {
content: "Version mobile du site";
display: block;
color: #777;
text-align: center;
font-style: italic;
}
}
Diminuer les tailles de police :
@media screen and (max-width:640px) and (orientation: landscape) {body {
-webkit-text-size-adjust: 70%;
}
}