Site "Mobile Friendly"
|
"Mobile Friendly" Le désign est souple et s'adapte aux tailles d'écran avec des zones tactiles suffisamment espacées.
La méthode "Responsive Design" propose de créer deux pages de présentations (CSS) Depuis avec les médias queries on adapte le CSS aux différentes taille d'écran dans une seule CSS
Google a un test de compatibilité mobile. Indiquer l'url de la page et il dit si elle est "Mobile Friendly" pour lui
Design proportionnel :donner les tailles en %. ou mieux auto (Width, Height, padding, Margin) font-size: 80..5%
|
Passer en HTML 5
<!DOCTYPE html>
<html lang="fr">
<meta charset="iso-8859-1"/>
Ajouter la balise meta viewport :
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
(le content="width=device-width, est inutile)
Tout savoir sur le Viewport "Comprendre le Viewport dans le Web mobile".
@media all and (max-device-width: 680px) {
/* Vos règles CSS pour les mobiles ici */
#banniere_image { display: none; }
nav ul { flex-direction: column; }
.col_2 {width:calc(100% - 166px)} }
|
Largeur du viewport par défaut
Opera Mobile 850 pixels
iPhone Safari 980 pixels/490
Android 800 pixels/400
Windows Phone 1024 pixels /512
1 point d'arrêt (iPhone 5s): 320px
Point d'arrêt 2 (iPhone 6+): 414px
3 points d'arrêt (iPad Mini): 703px
4 points d'arrêt (iPad Air): 768px
Toujours plus:
smartphones règle < 768px
smartphones modernes > 768px à <1024px
ordinateurs > 1024
|
Une feuille de styles de base pour le Web mobile
Design fluide entre 768px et 1024px : .container {min-width :768px; max-width :1024px;}
@media all and (max-width: 1024px) {
#bloc_page { width: auto; }
}
@media only screen and (min-width:600px){
//min-width:800px (min-width:960px){
@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;}
} //fin de @media (max-width: 640px)
La 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%; }
}
source Alsa Creation
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
Le "initial-scale=1.0" = prendre en compte le pixel-ratio du media-système.
mais le "user-scalable=yes" autorise l’utilisateur à zoomer.
/* CSS Normal */
#sidebar {float: right; width: 200px;} // la colone de droite
#main { margin-right: 200px;} // le corps de la page
@media (max-width: 1024px) {/* CSS appliqué aux petits écrans */
#sidebar {float: none; width: auto; }
#main { margin-right: 0px; }
}
images de fond
background-image
background-size l’image est placée telle qu’elle on coupe ce qui dépasse
background-size: contain l’image est ajustée pour être entièrement visible.
background-size: cover on agrandit les proportions pour qu’elle recouvre tout,
puis on découpe ce qui dépasse en bas ou à droite.
background-size: 50px 70px (l’image fait 50px par 70px)
background-size: 100% 100% (l’image fait la taille du bloc,
quitte à perdre ses proportions) :
Tableau - exemple n lignes m colonnes
Sur un écran de mobile, quand l’affichage normal ne permet plus de placer
toutes les cellules du tableau côte à côte, on linéarise verticalement
le tableau : ici on cré n tables avec les tr
et on met les m td de chaque table en colonne
table, tbody { display: block; }
tr { display: table; }
td { display: table-row; }
ligne de texte sans espace trop longue,body { word-wrap: break-word; }
pre { white-space: pre-wrap; } /* pour firefox et les <pre> */
un effet de « :hover » est déclenché avec le tapotement sur l’écran. Si vous avez un menu déroulant, il est possible de dérouler en tapant dessus, tout simplement.
si le menu contient des liens ou des boutons cliquables, le « tapotement »
peut accidentellement se propager sur un lien,appliquer une transition
#nav:hover ul { transition: 0s linear .05s;}l’apparition différé de 50 millisecondes.
 LE HOLLANDAIS VOLANT
/*
values */
display: block;
display: inline;
display: run-in;
/*
values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;
/*
plus
values */
display: block flow;
display: inline table;
display: flex run-in;
/*
values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;
/*
values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/*
values */
display: contents;
display: none;
/*
values */
display: inline-block;
display: inline-list-item;
display: inline-table;
display: inline-flex;
display: inline-grid;
/* Global values */
display: inherit;
display: initial;
display: unset;
Valeur initiale inline
S'applique à tous les éléments
|
