Discussion :

[crakazoid]

Bonjour,

J'essaye de faire du responsive design, de façon à ce que le site soit adapté à tous types d'écran.
Concrètement, j'utilise des pourcentages pour mes div et idéalement des unités viewport (vw), et des unités fixes pour gérer le cas des navigateurs qui ne supportent pas le viewport.
Ainsi quand la taille de l'écran se réduit, le site s'adapte. Ensuite je peux créer deux points de ruptures, pour les tablettes et les smartphones.
Tout allait bien jusqu'à ce que je teste le site sur une tablette dont le navigateur android n'avait pas été mis à jour, et qui ne supportait donc pas l'unité vw.
En disposant la tablette horizontalement, le résultat est ok, mais en pivotant la tablette pour la mettre en position verticale, c'est la cata :
les containers en pourcentage s'adaptent (ils se réduisent), mais évidemment les éléments définis avec des unités fixes ne se réduisent pas, et se retrouvent en dessous par manque de place. Les unités du type em ne sont d'aucun secours dans ce cas là.

Donc voilà : le problème se pose uniquement pour les tablettes et smartphones qui ne peuvent pas gérer le viewport (= navigateur non mis à jour). Pour les desktop le problème ne se pose pas puisqu'à priori on ne peut pas les retourner pour en faire basculer l'écran ...

Comment s'en sortir ? par media queries pour gérer le basculement d'écran comme si c'était un changement de largeur d'écran ?

[crakazoid]

Bon, je pense qu'il faut faire un fichier css par orientation (portrait et paysage) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<link rel="stylesheet" media="(orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation:landscape)" href="paysage.css">

[NoSmoking]

Bonjour,

Tout allait bien jusqu'à ce que je teste le site sur une tablette dont le navigateur android n'avait pas été mis à jour...

est ce une part importante de tes visiteurs ?

Les unités du type em ne sont d'aucun secours dans ce cas là.

Cette unité n'est pas faite pour cela sinon à quoi bon en créer d'autres !

Pour les desktop le problème ne se pose pas puisqu'à priori on ne peut pas les retourner pour en faire basculer l'écran ...

Si si on peut, paramètres de rotation, même si cela n'est pas toujours simple à utiliser ou mettre en oeuvre

...je pense qu'il faut faire un fichier css par orientation (portrait et paysage)

cela reste effectivement une bonne solution dans ton cas, même si le visiteur aura surement le réflexe de faire pivoter son lecteur !

[crakazoid]

NoSmoking, merci de ta réponse.

Finalement, j'ai renoncé à l'unité vw pour ce cas. Le but était d'avoir en en-tête de la page du site des carrés contenant une image. Alors je ne pouvais pas mettre des pourcentages, car selon le redimensionnement de la fenêtre, bin c'était plus des carrés ... D'où l'idée des vw pour que ça reste des carrés. J'avais donc des div avec un background de l'image et des vw pour en fixer la largeur et la hauteur. Mais vw et background-size ne sont pas encore assez supportés, alors finalement j'ai préféré utiliser directement des images placées dans une div et définir les propriétés suivantes pour les images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

max-width: 100%; height: auto;

, tout en donnant une largeur à la div contenant l'image (sinon ça ne marche pas).
Résultat les images s'adaptent bien à la taille de la fenêtre du navigateur.