[Fixed] Tablette HD et Media queries

Hello les amis,

Suite à l'achat d'une tablette Asus qui propose un affichage full HD, la version "paysage" (uniquement) affiche tout les sites (y compris les miens en responsive) en format desktop.

Du coup, je sais pas trop comment mieux cibler l'affichage sur la tablette. J'utilise le framework foudation depuis un certain temps, avec les mêmes dimensions de mes media queries (cibles width et non pas device-width) :

$small-range: (0em, 40em); /* 0, 640px */
$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em); /* 1921px */

Également, un meta viewport classique :

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

Concernant ma tablette, son viewport with est de 1280px pour un CSS device-width de 1920px (merci MyDevice). Du coup, elle possède la largeur "standard" des écrans PC, compliqué d'augmenter la valeur dans les media queries.

Il y a peut-être quelque chose que je fais mal ? Avez-vous une idée ?

Merci beaucoup !
Modifié par ILeG3nDz (16 Dec 2014 - 17:38)

ILeG3nDz a écrit :

Concernant ma tablette, son viewport with est de 1280px pour un CSS device-width de 1920px (merci MyDevice).

Voilà qui est très curieux. Le device-width est systématiquement inférieur ou égal a la valeur du viewport "réelle". La valeur de 1920px en device-width me semble même impossible actuellement et me laisse croire qu'il s'agit d'un bug de mydevice (ou du navigateur si c'est IE).

Tu peux donner des précisions sur ton Asus ? (OS, navigateur)

Yop,

Alors petite correction (mais vraiment petite) : sur firefox (android, à jour), il m'affiche bien 1280px+.

Le test que j'ai effectué était sur le navigateur tout dobé d'android qui s'appelle "navigateur" ou "internet" suivant les versions.

Tu dois certainement te demander pourquoi ce navigateur (et je comprends) : hé bien car j'ai un bug lié à l'affichage Desktop uniquement sur ce dernier, d'où ma question ^^

Voilà

ILeG3nDz a écrit :
Tu dois certainement te demander pourquoi ce navigateur (et je comprends) : hé bien car j'ai un bug lié à l'affichage Desktop uniquement sur ce dernier, d'où ma question ^^

Du coup, je pense que la réponse va effectivement être plus simple : ce navigateur est, je confirme, tout pourri. Parfois cela se ressent sur son mauvais calcul du device-width.

Par contre, il me semblait que sur les tablettes récentes (ce qui semble être le cas), le navigateur par défaut n'est plus le fameux "internet", mais plutôt Chrome.

D'ailleurs Caniuse lui-même considère que le navigateur d'Android n'est plus 4.4 mais 37 : http://caniuse.com/#search=flexbox

On est d'accord sur ce point : il est tout pourrit.

Cependant, j'ai la mal chance d'avoir un client un poil chiant avec se bug (qui concerne un position: fixed), qui est présent uniquement sur ce navigateur.

L'idée est donc de ne pas afficher la version desktop (ce qui est plutôt logique étant donné qu'on est sur tablette), et le problème sera résolu

C'est aussi pour faire en sorte d'afficher la bonne version, que tu sois sur Firefox, Chrome, ou ce IE6 Android tout pourrit

La réponse courte serait d'éduquer ton client en lui expliquant qu'on ne fait pas des sites pour nos clients mais pour des utilisateurs... et que s'il est statistiquement tout seul à utiliser ce navigateur obsolète, c'est plutôt à lui de s'adapter à son public et non l'inverse.

La réponse longue est en fait très courte : traiter ce genre de problèmes via JavaScript (cibler le user agent et modifier spécifiquement la meta viewport sur ce Asus.

En effet.

Merci beaucoup pour tes retours et également d'avoir pris le temps de me répondre, j'apprécie beaucoup !

Bonne fin de journée à tous

De rien, et bonne soirée