Bonjour. visiteurs jour : 116       Au président     Beauté santé     Infos loisirs     Ensemble      Jean      Informatique     Relativité     Relativity

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





Coucou et merci


  Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels  - Programation - Sites RJ - Vidéo - Plan du site -



   

Site "Mobile Friendly"

"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.

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


<!DOCTYPE html>

<html lang="fr">

<meta  charset="iso-8859-1"/>


Ajouter la balise meta viewport :
<meta name="viewport" content="width=device-width, initial-scale=1">

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 supports pédagogiques complémentaires



Accueil - Alsacreations.com

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%;}
}

suite Site "Mobile Friendly"             CSS3 : Media-Queries

-
vues  1842     En ligne actuellement :   2   Total des clics  1731222