Et autres joyeusetés…
// All hail the power of the media queries \ [T] /
@media (max-width: 1200px)
{
* {visibility: hidden}
}
Les images doivent être en sRVB, avec le profil incorporé si possible (mauvaise gestion des autres profils colorimétriques, notamment sur iPad).
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 :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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 :
max-width:100%; height:auto;
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.
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 :
html, body {overflow-x: hidden;}
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.
Voir page sur Wordpress : Images responsives
À décliner avec une session PHP pour supporter plus de périphériques ?
Pas de solution satisfaisante =(
On peut détecter le niveau de zoom avec :
var zoom = document.documentElement.clientWidth / window.innerWidth;
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)
La solution ici : http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad http://www.quirksmode.org/dom/events/scroll.html
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.
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/
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.
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 :
// 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');
});
Il faut ajouter la propriété table-layout:fixed; pour résoudre le problème.
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 :
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
});