Notes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Responsive design ======
Et autres joyeusetés...

[[http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html]]

<Code linenums>
// All hail the power of the media queries \ [T] /
@media (max-width: 1200px)
{
	* {visibility: hidden}
}
</Code>

Les images doivent être en sRVB, avec le profil incorporé si possible (mauvaise gestion des autres profils colorimétriques, notamment sur iPad).

=== Fonts ===

Privilégier les tailles de texte relatives et les hauteurs de blocs de textes qui peuvent s'étirer (accessibilité). De cette façon on peut changer toutes les tailles de polices dynamiquement. Préciser une taille de texte globale, genre font-size: 16px; sur le **html**.

Préciser un viewport :

<Code><meta name="viewport" content="width=device-width, initial-scale=1.0"></Code>

Ne pas utiliser de symboles Unicodes, leur rendu varie complètement suivant la configuration.

Mettre un padding 0,5em 0 sur les liens textuels pour les rendres cliquables facilement sur écran tactile.

Pour éviter qu'une image ne dépasse de son cadre : 
<Code:css> max-width:100%;
 height:auto;</Code>

=== Menu horizontal avec des titres en images de largeurs différentes ===
Mettre tout en display:table et display: table-cell, créer de l'espace vide autours des images pour qu'elles aient la même largeur. Ainsi elles pourront s'adapter proportionnellement entre elles.
===== Passage d'un design statique au responsive =====
Si il y a besoin de redéfinir régulièrement des tailles/marges fixes pour qu'un élément suive la taille de la page, c'est que son CSS n'est pas optimisé pour le responsive (en fait c'est de l'adaptive design, et c'est très galère à gérer car ça génère énormément de lignes de code). Il faut toujours essayer de le remettre dans le flux, lui donner une hauteur automatique avec des marges en pourcentage ou quelque chose comme ça, mais faire en sorte que sa taille se change automatiquement ou presque. Privilégier les pourcentages autant que possible.

Pour l'iPad, penser à ajouter le code suivant, sinon le contenu risque de dépasser sur les côtés :
<Code:css>html, body {overflow-x: hidden;}</Code>
===== Optimisation des images =====
=== Doubler la taille de l'image et réduire la compression jpeg, pour l'afficher à la moitié de la taille ===
[[http://www.netvlies.nl/blog/design-interactie/retina-revolution]]

Cela est censé pouvoir réduire le poids de l'image sans altérer la qualité, mais avec les dégradés cela peut tout de même l'altérer.\\
À utiliser avec précaution.

=== Technique du cookie de résolution ===
Voir page sur Wordpress : [[webdev:wordpress:images_responsive|Images responsives]]

//À décliner avec une session PHP pour supporter plus de périphériques ?//
===== Hack et correctifs =====
=== Détecter le niveau et les changements de zoom ===
Pas de solution satisfaisante =(

On peut détecter le niveau de zoom avec :
<Code>var zoom = document.documentElement.clientWidth / window.innerWidth;</Code>
Mais il n'y a pas de moyen de détecter l'évènement de changement de zoom 
(mal supporté, cf [[http://www.quirksmode.org/dom/events/resize_mobile.html]])

=== L'évènement scroll mal géré sur iPad et iPhone ===
La solution ici : [[http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad]]
[[http://www.quirksmode.org/dom/events/scroll.html]]

=== iPad : overflow-x: hidden + overflow-y: visible ===
Quand on utilise ces 2 propriétés sur le même élément, le overflow-y est ignoré et caché. Cela semble venir d'un flou dans la spécification W3C : [[http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue]]

Solution : Mettre le hidden sur un élément parent.

=== Firefox mobile (android) : overflow-x: hidden; cause un scroll "caché" ===
En fait overflow-x est mal géré sur FF mobile, il faut opter pour overflow tout court.

[[https://css-tricks.com/findingfixing-unintended-body-overflow/]]

=== Firefox mobile (android) : position:absolute dans un position relative ne marche pas ===
Les position:absolute dans un position relative ne marchent pas si le position absolute est positionné en display:table-cell. Il faut le mettre sur un autre élément ou changer son display.


=== L'évènement mouseover est lancé avant le clic ===
C'est en fait un comportement voulu pour les mobiles, destiné à bien affiché les sous-menus dynamiques.

Sur mobile et tablette, les événements "mouseover" sont lancés au clic, et les "click" au deuxième clic (sous-menu non adaptés). En jQuery, on peut désactiver (.off) ces événements en détectant l'événement "touchstart" des écrans tactiles.

Ce qui donne : 

<Code:javascript>
    // Permet de résoudre le problème des 2 clics avec mouseover sur iPad
    // Quand l'évènement touchstart marche, on supprime le mouseover
    jQuery('#image-produit-2, #image-produit-3').on('touchstart', function()
    {
        jQuery(this).off('mouseover');
    });
    
    jQuery('#image-produit-2, #image-produit-3').on('mouseover', function()
    {
        jQuery(this).addClass('halo');
    });
    
    jQuery('#image-produit-2, #image-produit-3').on('mouseleave', function()
    {
        jQuery(this).removeClass('halo');
    });</Code>

=== iPad : les éléments display:table sont plus haut que ce qu'ils devraient ===
Il faut ajouter la propriété **table-layout:fixed;** pour résoudre le problème.

=== iPad : l'évènement 'load' ne se lance pas correctement sur une image ===
C'est lié au cache qui fait que l'évènement est lancé avant l'exécution du script. Pour résoudre le problème il faut relancer l'évènement sur cet élément :
<Code:javascript>
jQuery('img').on('load', function()
{
  // ...
}).each(function() {
  if(this.complete) jQuery(this).load();// Permet de lancer tout de même l'évènement au bon moment si l'image était en cache, cela règle un problème sur l'iPad
});
</Code>

[[http://stackoverflow.com/questions/3588102/jquery-load-not-working-on-my-image#answer-3590761|Réponse Stackoverflow]]
Notes

Outils pour utilisateurs

Outils du site

Outils de la page
