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

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





Coucou et merci


 
Clics 442

Site "Mobile Friendly"

"Mobile Friendly" 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

Site Mobile Friendly

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 19-2-2018.   Titre  

 

Total des visiteurs  :    482971   dont aujourd'hui :   49    En ligne actuellement :  1      Total des clics   1210460