{tablettes} // media queries / même CSS en portrait et en paysage

Salut je me pose une question et j'ai du mal à trouver la réponse sur le web.
Vous allez peut-être pouvoir m'aider.

Je suis en train de monter un site responsive, tout s'adapte très bien SAUF sur tablette, j'ai un soucis avec le passage du mode portrait au mode paysage. En effet, lorsque les tablettes passent en paysage, on obtient une résolution similaire aux résolutions des ordis fixes, avec la mienne en l’occurrence du 1280x800.
Du coup mon site passe en mode ordi fixe quand je tourne la tablette en mode paysage.
Ce que je ne veux absolument pas car les tailles de polices ne sont pas adaptées, et tout le reste non plus d'ailleurs.

Est ce qu'il y aurait un moyen, avec uniquement les médias queries (et éventuellement un peu de javascript ou jquery), sans aller chercher les user agent, de conserver le même affichage sur ma tablette, que ce soit en mode portrait ou en mode paysage ?

Merci par avance.
Modifié par EmmaGuyot (12 Jun 2014 - 03:40)

Bonjour,

Si tu te bases uniquement sur la résolution et / ou la taille de l’écran, tu ne pourras rien faire puisque la plupart des tablettes ont effectivement la même résolution que les écrans de bureau moyens.

Tu peux faire le choix en revanche de changer la valeur de ton palier « bureau » pour qu’il prenne au minimum du 1400px par exemple. Mais ça ne te mets pas à l’abri du fait que certaines tablettes pourraient parfaitement atteindre cette résolution en mode paysage.

Cependant tu dis que les tailles de textes ne sont pas adaptées : il est donc fort probable que sur un écran de bureau aux mêmes dimensions (le plus courant est toujours le 1280px de large, chez le grand public) ton affichage ne soit pas mieux adapté…

Merci pour ta réponse.
Donc si je comprends bien, aucun moyen de le faire uniquement avec les média queries ?
Je dois me rabattre sur le user agent alors ?

J'ai le sentiment qu'on peut le faire avec les média queries, je ne sais pas pourquoi...

Est ce que quelqu'un aurait un avis/une expérience différent(e) ?

PS // je pense que tu n'as pas bien compris ce que je disais quand je parle du fait que ma police n'est pas adaptée. L'affichage bureau 1280 n'est pas adapté à la tablette, mais au bureau. Donc sur un bureau il est nickel. Ce que je ne veux pas, c'est récupérer cet affichage bureau sur ma tablette parceque sur cet affichage, le site ne fonctionne pas en tactile, il est fait pour un bureau avec souris et autres. Enfin de toutes façons c'est pas le sujet. ^^
Modifié par EmmaGuyot (12 Jun 2014 - 17:59)

up

Bonjour,

il y a d'autres paramètres que max- ou min-width mais je serais bien en peine de te livrer une solution clé en main, juste quelques pistes (dont certaines futuristes) :
Responsive Webdesign – présent et futur de l’adaptation mobile ("les spécificités du mobile")
Détecter le support des fonctionnalités avec @supports
Le futur du Responsive Web Design par Raphaël aux Techdays

Modernizr est une bibliothèque pouvant être la solution si les classes ajoutées sont différentes sur dekstop vs mobile, dans le sens que tu souhaites (faut tester les 2 situations et comparer). Elle recourt à l'UA sniffing mais très très peu au vu du nombre de fonctionnalités testées (j'ai vérifié le code source avant d'en dire du bien ), par contre JS doit être activé (pas très gênant vu les navigateurs ciblés)
Modifié par Felipe (18 Jun 2014 - 12:00)

Bonjour,

EmmaGuyot a écrit :
je pense que tu n'as pas bien compris ce que je disais quand je parle du fait que ma police n'est pas adaptée. L'affichage bureau 1280 n'est pas adapté à la tablette, mais au bureau. Donc sur un bureau il est nickel. Ce que je ne veux pas, c'est récupérer cet affichage bureau sur ma tablette parceque sur cet affichage, le site ne fonctionne pas en tactile, il est fait pour un bureau avec souris et autres. Enfin de toutes façons c'est pas le sujet. ^^

En réalité, c'est ça qui pose problème justement. Tu ne peux pas te référer au dimensions des points de rupture pour décider si on est en mode tablette ou en mode desktop.

Les tablettes peuvent avoir des viewport de 700, 860, 1024 ou même 1600 pixels, peu importe (tu n'a aucun moyen de maîtriser cela). Tu ne peux (et ne dois) donc pas les cibler en fonction du viewport. Ce sont les dimensions utiles de ton contenu qui importent pour fixer tes points de rupture

Le problème ici vient du fait que le site ne soit pas accessible en tactile ET à la souris (mais aussi au clavier, et en utilisant une synthèse vocale…), quel que soit le viewport. Dans la mesure du possible… après je ne sais pas quelles sont tes contraintes exactes.
Modifié par audrasjb (18 Jun 2014 - 12:09)

Merci pour vos réponses.
Je n'attends pas une clef en main, pas de soucis.
Vos éléments de réponse vont me permettre de trouver une solution.
J'ai également une piste grâce à ce post : http://forum.alsacreations.com/topic-27-69549-1-Detection-des-media-queries-en-JS.html

Que pensez vous de cette solution ? Pourrait-elle s'adapter à mon cas à votre avis ?

Merci à vous

Felipe a écrit :
Bonjour,

il y a d'autres paramètres que max- ou min-width mais je serais bien en peine de te livrer une solution clé en main, juste quelques pistes (dont certaines futuristes) :
Responsive Webdesign – présent et futur de l’adaptation mobile ("les spécificités du mobile")
Détecter le support des fonctionnalités avec @supports
Le futur du Responsive Web Design par Raphaël aux Techdays

Modernizr est une bibliothèque pouvant être la solution si les classes ajoutées sont différentes sur dekstop vs mobile, dans le sens que tu souhaites (faut tester les 2 situations et comparer). Elle recourt à l'UA sniffing mais très très peu au vu du nombre de fonctionnalités testées (j'ai vérifié le code source avant d'en dire du bien ), par contre JS doit être activé (pas très gênant vu les navigateurs ciblés)

Merci Felipe, ces pistes ont l'air intéressantes.

audrasjb a écrit :
Bonjour,

En réalité, c'est ça qui pose problème justement. Tu ne peux pas te référer au dimensions des points de rupture pour décider si on est en mode tablette ou en mode desktop.

Les tablettes peuvent avoir des viewport de 700, 860, 1024 ou même 1600 pixels, peu importe (tu n'a aucun moyen de maîtriser cela). Tu ne peux (et ne dois) donc pas les cibler en fonction du viewport. Ce sont les dimensions utiles de ton contenu qui importent pour fixer tes points de rupture

Le problème ici vient du fait que le site ne soit pas accessible en tactile ET à la souris (mais aussi au clavier, et en utilisant une synthèse vocale…), quel que soit le viewport. Dans la mesure du possible… après je ne sais pas quelles sont tes contraintes exactes.

Oui je m'en suis rendue compte en cours de route que je ne pouvais pas me contenter de la taille en pixels.
Après, pour le reste, c'est vrai que ce projet ne sera pas ultra accessible.
Ce sera un site d’œuvres d'arts très visuelles, donc les mal voyants n'y viendront pas à mon avis. C'est pour ça que je ne me suis pas trop pris la tête sur ce projet avec l'accessibilité. Je sais que dans l'idéal c'est mieux de le faire à chaque fois, mais je pense que pour ce projet là je peux laisser couler.
Après quand je passe en paysage sur tablette il n'y a pas que l'histoire du tactile qui pose problème. La navigation est différente en mode bureau.

En tous cas merci.
Je pense que je ferai mieux la prochaine fois de toutes façons.
Modifié par EmmaGuyot (19 Jun 2014 - 01:23)

Up

Donc @Felipe, encore merci pour tes liens, j'ai lu les deux longs articles et regardé la vidéo, je n'ai pas de solution qui colle à ce que je voudrais faire dedans. Ceci dit j'y ai lu plein de choses super intéressantes que j'utiliserai certainement à l'avenir.

Pour Modernizr, je vois ce que c'est, mais j'aimerais ne pas avoir à passer par là car je n'ai pas envie d'ajouter des classes dans mon html, ça m'obligerait à doubler mes règles CSS pour les dites classes et je me retrouverais avec une pagaille pas possible.
Mon projet est pratiquement terminé, je ne vais pas réécrire tout le code en plus juste pour ça... ça serait dommage quand même.
Pour l'instant, je ne trouve aucune solution pertinente pour détecter si on est sur une tablette avec les media queries.


Il y a bien orientation: landscape, mais apparemment, c'est aussi utilisé sur les autres devices, même les devices qui ne sont pas "à main", comme les pc de bureau, les ordinateurs portables... il doit bien y avoir une media query de plus à ajouter pour détecter le type de device non ?

Je n'abandonne pas, je sais pas pourquoi, j'ai le sentiment que c'est à ma portée, et qu'il doit forcément exister une méthode qui fonctionne.

Il me semble avoir vu quelqu'un qui parlait ici sur le forum d'une solution à partir de détection de ratio du viewport ou un truc comme ça. Ça parle à quelqu'un ?

Je vais continuer de chercher, si quelqu'un a une expérience à ce sujet...
Modifié par EmmaGuyot (21 Jun 2014 - 01:06)