Alternatives pour les navigateurs qui ne gèrent pas les unités vw ?

Bonjour,

Cela fait un moment que je galère avec ce problème sans vraiment trouver de solution.
J'utilise les unités vw (viewport) pour faire des sites responsive. Avec cette unité je trouve que c'est parfait : lorsque la taille de l'écran varie, les tailles de la police (par exemple) s'adaptent et il suffit ensuite de créer quelques points de rupture (souvent deux) pour modifier l'affichage quand l'écran devient trop petit (tablettes, smartphones ...).
Mais il y a juste un sérieux problème : les navigateurs qui ne sont pas à jour et donc qui ne gèrent pas le vw. Si on ne fait rien c'est juste catastrophique : polices réduites à leur taille par défaut, div devenant microscopiques ... Le pire que j'ai vu c'est sur une tablette avec un android obsolète lorsqu'on passe du mode paysage au mode portrait.

Alors quelques solutions que j'ai envisagées :

- rajouter des tailles fixes avant la taille en vw, comme ça le navigateur qui ne gère pas le vw peut utiliser l'autre unité ==> mais ça ne résoud rien, on se retrouve par exemple avec une police de taille fixe dans un container de taille variable ... solution qui ne tient pas la route longtemps ...

- multiplier les media queries ==> décourageant vu le nombre de tailles d'écrans et les nouvelles tailles imprévues qui peuvent sortir

- abandonner les vw et les remplacer par un polyfill : une fonction javascript qui récupère la largeur de l'écran, et qui à partir d'un paramètre de taille souhaitée (proportionnelle à la largeur de l'écran) retourne un nombre de pixels. Par contre on ne gère pas les utilisateurs ayant désactivé javascript, et surtout est-ce que le temps de traitement est négligeable ???

Merci pour d'éventuels conseils ou d'autres solutions pour résoudre de problème.

Bonjour,

Thomas237 a écrit :
J'utilise les unités vw (viewport) pour faire des sites responsive. Avec cette unité je trouve que c'est parfait : lorsque la taille de l'écran varie, les tailles de la police (par exemple) s'adaptent et il suffit ensuite de créer quelques points de rupture (souvent deux) pour modifier l'affichage quand l'écran devient trop petit (tablettes, smartphones ...).

L'utilisation des unités vw, vh, vmin et vmax pour les textes posent question. Des millions de gens peuvent potentiellement te maudire quand ils essaient de te lire et qu'ils n'ont tout simplement pas leurs lunettes sous la main. En plus de ça, le zoom des navigateurs fonctionne mal quand on utilise ces unités : ils ne semblent pas grossir les textes : justement au moment où on en avait le plus besoin, pas de bol . Il y a peut-être des astuces pour contourner ça : encore faut-il les connaitre, identifier les cas où elles s'avèrent nécessaires (et mon petit doigt me dit que ça, c'est coton), et les mettre en place.

Je vois donc peu de bonnes raisons de changer la taille de la police en fonction de la taille d'une fenêtre. Un bon design devrait selon moi l'éviter à tout prix (sauf éventuellement pour les gros titres, mais pour ceux-là, il y a fort à parier qu'on a pas mal d'alternatives).

Évidemment, je peux avoir faux, et l'avis d'autres personnes sur ce point-là serait bienvenue.

Pour la taille des boites, par contre, les vw, vh, vmin et vmax, ça peut être pratique. Et dans ce cas, pour les vieux navigateurs, il suffit d’utiliser la méthode que tu envisageais en les faisant précéder par une taille en px qui assurera le coup avec les vieux navigateurs.

Je n'ai pas trop d'avis sur les méthodes alternatives en javascript, mais à priori, je m'en méfierais, notamment en cas de zoom (texte seul ou pas) ou modification de la taille de la police de base par l'utilisateur via une méthode ou une autre.

Amicalement,

Déjà merci pour ta réponse

parsimonhi a écrit :
L'utilisation des unités vw, vh, vmin et vmax pour les textes posent question. Des millions de gens peuvent potentiellement te maudire quand ils essaient de te lire et qu'ils n'ont tout simplement pas leurs lunettes sous la main.

ça dépend, car je peux choisir vw pour écrire avec des gros caractères. Exemple 2vw pour un écran de largeur 1280px. Par contre, oui c'est vrai si la taille de la fenêtre se réduit et que le point de rupture tarde à arriver. C'est vrai aussi pour tous les écrans qui peuvent basculer en mode portrait/paysage : en mode portrait du coup la largeur de l'écran est beaucoup plus petite et la taille du texte diminue beaucoup trop. A mon avis, les font-size en vw sont intéressants plutôt pour les desktop et jusqu'au format TV.

parsimonhi a écrit :
En plus de ça, le zoom des navigateurs fonctionne mal quand on utilise ces unités : ils ne semblent pas grossir les textes : justement au moment où on en avait le plus besoin, pas de bol . Il y a peut-être des astuces pour contourner ça : encore faut-il les connaitre, identifier les cas où elles s'avèrent nécessaires (et mon petit doigt me dit que ça, c'est coton), et les mettre en place.

Je vois donc peu de bonnes raisons de changer la taille de la police en fonction de la taille d'une fenêtre. Un bon design devrait selon moi l'éviter à tout prix (sauf éventuellement pour les gros titres, mais pour ceux-là, il y a fort à parier qu'on a pas mal d'alternatives).

Donc d'après toi si on a un texte dans une div dont la taille peut varier, on peut garder le texte avec une taille fixe, mais à un moment donné, le texte va déborder si la taille de la fenêtre d'affichage se réduit. Et C'est à ce moment qu'on fait intervenir un media queries pour réduire le font-size du texte, c'est ça ? ça ne risque pas de faire beaucoup trop de points de rupture ?
Modifié par Thomas237 (27 Feb 2016 - 01:54)

parsimonhi a écrit :
Bonjour,L'utilisation des unités vw, vh, vmin et vmax pour les textes posent question. Des millions de gens peuvent potentiellement te maudire quand ils essaient de te lire et qu'ils n'ont tout simplement pas leurs lunettes sous la main.

Il faut aussi penser aux grands écrans : si l'on dispose d'un écran 27 pouces WQHD on n'a pas forcément envie de lire un texte de paragraphe qui - si le dev n'y prend garde - se trouve équivalent à du 100px...

Thomas237 a écrit :
…ça dépend, car je peux choisir vw pour écrire avec des gros caractères.

Oui pour ce qui est écrit en gros. Mais tu auras des soucis avec les zooms et les écrans de taille exceptionnelle.

Thomas237 a écrit :
Donc d'après toi si on a un texte dans une div dont la taille peut varier, on peut garder le texte avec une taille fixe, mais à un moment donné, le texte va déborder si la taille de la fenêtre d'affichage se réduit. Et C'est à ce moment qu'on fait intervenir un media queries pour réduire le font-size du texte, c'est ça ? ça ne risque pas de faire beaucoup trop de points de rupture ?

Il vaut mieux faire en sorte que ça ne déborde pas. Réduire la taille des caractères ne devrait être qu'un dernier recours. En pratique, ça devrait faire assez peu de points de rupture.

On peut noter qu'il existe une propriété css hyphens:auto; (très mal supportée par les navigateurs pour l'instant) qui permet de faire des césures automatiques. Ça permettra selon moi à l'avenir d'éviter pas mal de dépassement. A titre d'exemple, voyez en utilisant firefox, avec une taille de fenêtre de largeur minimale, et un zoom text seul maximal (on se met là vraiment dans les pires conditions) la page http://jeudego.org/_php/regleGo_intro.php (scrollez pour visualiser le contenu, et cliquez sur le bouton "Menu" pour afficher le menu : rien ne déborde sans traficoter la taille de base de la police !).

Amicalement,

parsimonhi a écrit :

A titre d'exemple, voyez en utilisant firefox, avec une taille de fenêtre de largeur minimale, et un zoom text seul maximal (on se met là vraiment dans les pires conditions) la page http://jeudego.org/_php/regleGo_intro.php (scrollez pour visualiser le contenu, et cliquez sur le bouton "Menu" pour afficher le menu : rien ne déborde sans traficoter la taille de base de la police !).

J'ai essayé, effectivement faut être un utilisateur vicieux car j'ai du chercher pour pouvoir zoomer juste avec le texte sur Firefox, déjà que le menu '"Affichage" n'apparaît plus par défaut.
Sinon oui le résultat est bluffant avec la césure des mots et le site est vraiment responsive.
Bon bin je suis convaincu pour ne plus utiliser de vw pour les font-size.
Est-ce que ça peut être intéressant d'utiliser des tailles de police standard (medium, small, large ..) ? car elle ont l'avantage d'être interprétées différemment selon les types de navigateurs et donc des différentes tailles d'écran que cela suppose. Mais bien sûr toujours avec des points de rupture, car par exemple j'ai testé xx-large sur un desktop, ça apparaît gros bien sûr, mais xx-large sur un smartphone, là c'est carrément énorme, par contre en réduisant à x-large via media queries c'est correct.

Thomas237 a écrit :
Bon bin je suis convaincu pour ne plus utiliser de vw pour les font-size.

Très bonne initiative. Je m'y étais essayé moi-même à un moment donné, pour le fun. Mais cette méthode a vitre montrée ses limites, notamment l'impossibilité de pouvoir zoomer comme il a été dit plus haut.

Je l'ai juste gardé dans mon framework, à titre expérimental : j'utilise les unités vmin, avec des media queries pour contrôler au mieux les effets de débordement lié à cette méthode. Mais je ne m'en sert plus gère...
Modifié par Olivier C (29 Feb 2016 - 06:55)

Olivier C a écrit :

Très bonne initiative. Je m'y étais essayé moi-même à un moment donné, pour le fun. Mais cette méthode a vitre montrée ses limites, notamment l'impossibilité de pouvoir zoomer comme il a été dit plus haut.

Je l'ai juste gardé dans mon framework, à titre expérimental : j'utilise les unités vmin, avec des media queries pour contrôler au mieux les effets de débordement lié à cette méthode. Mais je ne m'en sert plus gère...

Par contre je pense qu'il peut y avoir des exceptions. Comme par exemple le site que je fais où sur une page on ne trouve que 4 lignes de texte avec font-size pas trop petite. Sur grand écran la page est centrée verticalement, en vw la page reste encore très bien lisible sur une tablette sans zoomer. Les medias queries interviennent quand la taille de l'écran équivaut à un smartphone et je passe alors en taille de police fixe (pixels + rem).
Par contre le problème c'est de vouloir gérer les navigateurs qui ne supportent pas le vw. Je pense comme solution à détecter le navigateur avant le <head> par une condition du type :

<!--[if lt IE 9 ]> <html class="ltIE9"> <![endif]-->

puis un code javascript pour émuler le vw. Ainsi les autres navigateurs compatibles peuvent continuer à utiliser les vw sans appeler le javascript.

Ou encore plus simple, mais je n'ai pas encore testé, tester le support de la propriété en javascript :

if(!('vw' in document.body.style)) {
   traitement
}

Modifié par Thomas237 (29 Feb 2016 - 20:32)

Bonjour,

D'une manière générale, c'est difficile de détecter qui supporte quoi.

Pour les vw, vh, ..., ce qu'on fait souvent plutôt que d'essayer de détecter, c'est de doublonner la propriété qui utilise ces unités en la faisant précéder par une instruction qui donne à cette propriété une valeur acceptable dans une unité connue. Exemple :

header
{
height:5em;
height:10vh;
}

Amicalement,

parsimonhi a écrit :
Bonjour,

D'une manière générale, c'est difficile de détecter qui supporte quoi.

Pour les vw, vh, ..., ce qu'on fait souvent plutôt que d'essayer de détecter, c'est de doublonner la propriété qui utilise ces unités en la faisant précéder par une instruction qui donne à cette propriété une valeur acceptable dans une unité connue. Exemple :

header
{
height:5em;
height:10vh;
}

Amicalement,

Bonsoir,
Le problème c'est que je ne pouvais pas me contenter de multiplier les types d'unités font-size (ce que je fais déjà par ailleurs), car mon texte se trouve dans un formulaire responsive, et je veux vraiment qu'il s'adapte au resize.

J'ai trouvé ce script de 3 lignes qui permet de détecter si le navigateur supporte ou pas les unités vw et vh. Je l'ai testé, il fonctionne bien, à condition d'utiliser pour le test une div de 50vw. J'ignore pourquoi ça ne marche qu'avec cette valeur de 50vw ..
le code est extrait et adapté à partir de Modernizr.

$(function () {
  elemWidth = parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10);
  halfWidth = parseInt(window.innerWidth / 2, 10);
  $("#checkVw").html("Your browser" + ((elemWidth == halfWidth) ? "" : "does not ") + " support VW and VH");
});

#checkVw { width: 50vw; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="checkVw"></div>

Modifié par Thomas237 (01 Mar 2016 - 00:22)

Bonjour,

Thomas237 a écrit :
J'ignore pourquoi ça ne marche qu'avec cette valeur de 50vw ..

Pas rassurant ! Et ça ne marchera pas non plus si l'utilisateur a désactivé javascript, ou si le navigateur ne connait getComputedStyle (sauf si jquery s'en occupe ce qui reste à vérifier) ou etc. Et puis tes 3 lignes ont besoin de jquery (100ko de script). Et enfin, tu vas devoir écrire un bout de javascript pour mettre en place un correctif à tous les endroits où tu as mis du vw, vh, etc.

C'est ce que j'appelle "difficile à tester d'une manière générale".

Amicalement,
Modifié par parsimonhi (01 Mar 2016 - 01:38)

Bonjour,

Je sais ce n'est pas parfait, mais ça peut permettre d'avoir un rendu équivalent pour quelques navigateurs obsolètes. En dernier recours pour les navigateurs vraiment moisis, le script ne s'exécutera pas et il affichera une taille en rem ou pixels.
Sinon j'utilise déjà jQuery pour le site et l'utilisateur est censé avoir activé son JavaScript car j'ai besoin de parser un fichier xml et de remplir des div en ajax. Je ne voulais pas utiliser une base de données pour récupérer une information juste dans une centaine de lignes parce que là c'est utiliser un marteau pilon pour écraser une mouche, et ça pénalise en temps d'accès les 99% des utilisateurs "normaux". L'utilisateur qui a désactivé son javascript est, concernant cette page, orienté vers un pdf dans lequel il cherche l'information lui-même, Je pourrais faire une base de données et une page sans JavaScript juste pour les 1% qui persistent à vouloir "rouler en calèche sur une autoroute", mais faut pas pousser ...

Sinon, il n'y a que 4 div où j'ai vraiment besoin des vw. Pour tester, je comprend la difficulté. Je crois que certaines agences Web utilisent une machine virtuelle par configuration à tester, moi je vais me contenter de voir à droite à gauche comment le site s'affiche
Modifié par Thomas237 (01 Mar 2016 - 11:57)

Bonsoir,

Je reviens une dernière fois sur le sujet pour dire que finalement je suis d'accord avec les remarques qui ont été faites : détecter le support de vw puis l'émuler en JavaScript me paraît un peu risqué.

En conclusion, il faut voir les unités viewport comme un moyen d'affiner davantage l'aspect responsive : les éléments s'adaptent exactement à la taille de l'écran, et on fixe des point de rupture (media queries) lorsqu'ils deviennent trop petits.
Pour les navigateurs ne supportant pas les unités vw, on fixe les mêmes points de ruptures, mais entre ces limites, on peut accepter que ces éléments puissent rester de taille fixe. Ainsi, au lieu de se faire continuellement, l'adaptation se fait en 3 points (par exemple). On a donc une légère dégradation de l'affichage selon le support, ce qui est conforme à ce que l'on peut attendre d'un navigateur ancien par rapport à un navigateur moderne.