Bonjour     visiteurs jour : 49     Total clics   :   1185148       Sites associés 

Les joies de l'informatique et de l'internet !





Coucou et merci


 
Clics 510

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.

logo le hollandais volant 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

Sites mobiles

Vos messages sont modérés.   Les visiteurs non inscrits ont leur pseudo préfixé par x_.   Merci de respecter la loi et les personnes.

Votre message -->

Classement
par date
croissante.
décroissante.
Vous
inaugurez
ce forum,
félicitations.
Pseudo     Le 21-10-2017.   Titre  

 

Total des visiteurs  :    475713   dont aujourd'hui :   49    En ligne actuellement :  1      Total des clics   1185148