Bonjour. visiteurs jour : 50
Au président
Beauté santé
Infos loisirs
Ensemble
Jean
Informatique
Einstein
Santé corona
Les joies de l'informatique et de l'internet !
Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels - Programation - Sites RJ - Vidéo - Plan du site -
"Mobile Friendly" AAA Le désign du site doit être souple et s'adapter aux tailles d'écran avezc des zones tactiles suffisamment espacées. <!DOCTYPE html> <html lang="fr"> <meta charset="iso-8859-1"/> Ajouter la balise meta viewport :
Pour tout savoir sur le Viewport, n'hésitez pas à parcourir l'article "Comprendre le Viewport dans le Web mobile".
Proposer une alternative à la page CSS. remplacerez cette ligne : <link rel="stylesheet" media="screen" type="text/CSS" href="style.css" > par les 2 ci-dessous <link rel="stylesheet" media="screen" type="text/CSS" href="styled.css" > <link rel="stylesheet" media="(max-width: 480px)" type="text/CSS" href="stylem.css" > Où "styled.css" est pour les ordinateurs de bureau et tablettes et "stylem.css" est pour les téléphones portables. En CSS 2, il n'était pas possible de définir des largeurs d'images ou d'objets en %. Le CSS 3 le permettre img, iframe, table, object, embed, video { max-width:100%;} Lorsque vous aurez fait ces premiers changements, votre page devrait déjà se présenter beaucoup mieux. source
Site "Mobile Friendly"
La méthode dite "Responsive Design" propose de créer deux pages de présentations (CSS) pour une même page de contenu (HTML). responsive =nerveux, qui répond bien,qui réagit bien
Google propose un test de compatibilité mobile. Indiquer l'url de la page pour savoir ele est ou non "Mobile Friendly" selon les critères de Google.
Design proportionnel
Les tailles doivent être donées en %. (Width et éventuellement Height), marges (padding et Margin) font-size: 120% n'hésitez pas à indiquer 2 chiffres après la virgule!
Passer en HTML 5
<meta name="viewport" content="width=device-width, initial-scale=1">
Une feuille de styles de base pour le Web mobile
feuille de style CSS dédiée aux écrans...Créé le 15 Février 2011, mis à jour le 06 Janvier 2016
@media (max-width: 640px) {
* {box-sizing: border-box; }
/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
body { width: auto; margin: 0; padding: 0; }
/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video { max-width: 100%; }
/* conserver le ratio des images */
img { height: auto; }
/* gestion des mots longs */
textarea,table,td,th,code,pre,samp {-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;hyphens: auto;word-wrap: break-word; /* passage à la ligne forcé */ }
code,pre,samp {white-space: pre-wrap; /* 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;width: auto;}
/* masquer les éléments superflus */
.hide_mobile {display: none !important;}
/* Un message personnalisé */
body:before {content: "Version mobile du site";display: block;text-align: center;font-style: italic;color: #777;}
}
Touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage
(car bugguée sur les périphériques iPhone et iPad).
@media (max-device-width:768px) and (orientation: landscape) {
html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
}