Quelles unités de mesure pour une web app en full page

Bonjour,

J'ai une web app à monter (android et iOS) qui nécessite une mise en page particulière. Tous les éléments sont disposés sur l'écran (sans scroll). Vu la panoplie de résolutions différentes et la prise en compte du paysage ainsi que le portrait, je ne sais pas quelles unités de mesure prendre pour dimensionner mes éléments.

J'ai déjà fait une tentative avec des vh pour tout (dimensions, taille de police, etc) mais je ne suis pas entièrement satisfait du résultat.

Je ne sais pas s'il vaut mieux utiliser des unités absolues, monter l'app pour une résolution définie et puis trouver un js magique qui parse le css, ou si j'ai manqué une unité en css... HELP !

Hello,

Une idée...
Utiliser des valeurs en vw/vh pour les width/height et en em pour les min-width/min-height (qui assurera un rendu minimum).

Bonjour et bienvenue,

iOS a un ou plusieurs méchants problèmes avec les unités de viewport. Entre autres http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html et http://caniuse.com/#feat=viewport-units
iOS 7 beaucoup, iOS 8 encore un peu (dans mon cas, une modale très complexe en tout cas) et iOS 9 j'en sais rien.

Utiliser des px alors que le dernier iPhone n'a pas la même hauteur que les autres, je déconseille
A priori tu dois pouvoir t'en sortir avec des %, mais il ne faut pas que ça déforme des images ou autre. Note : j'ai peu d'expérience avec le mobile (quand un device en particulier fait des siennes)

"mais je ne suis pas entièrement satisfait du résultat" > mais encore ?

Felipe a écrit :
Bonjour et bienvenue,

iOS a un ou plusieurs méchants problèmes avec les unités de viewport. Entre autres http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html et http://caniuse.com/#feat=viewport-units
iOS 7 beaucoup, iOS 8 encore un peu (dans mon cas, une modale très complexe en tout cas) et iOS 9 j'en sais rien.

Utiliser des px alors que le dernier iPhone n'a pas la même hauteur que les autres, je déconseille
A priori tu dois pouvoir t'en sortir avec des %, mais il ne faut pas que ça déforme des images ou autre. Note : j'ai peu d'expérience avec le mobile (quand un device en particulier fait des siennes)

"mais je ne suis pas entièrement satisfait du résultat" > mais encore ?

Merci Felipe. tu m'as confirmé ce que je pensais.

@appleneil : Perso j'alterne entre le REM et le % (suivant le contexte). Depuis quelques années maintenant, je n'utilise plus le PX (sauf si c'est demandé dans un projet ou que le projet est en px (pour rester cohérent)). Parfois, c'est pas facile de rester cohérent quand le projet on retrouve du em, rem, %, px, vh, vw, etc. -> oui oui, j'ai vu....
Modifié par niuxe (17 Mar 2016 - 18:08)

Du même avis que Niuxe je favorise les REM (au chocolat) et par extension em ainsi que les pourcentages. Par contre le pixel je le garde, pour les fioritures (bordures, ombres...).

De ce que j'ai observé l'adaptation est satisfaisante. Les rapports de proportionnalités sont respectés, c'est l'essentiel.

D'ailleurs je n'ai pas encore compris quelle est la plus-value à utiliser la taille du viewport...
Modifié par Greg_Lumiere (17 Mar 2016 - 20:29)

Merci à tous pour vos réponses.

L'avantage du vh/vw (plus le buggyfill) est que tous les éléments se redimensionne selon la taille de l'écran, et donc c'est plus facile de garder tous les éléments à leur place proportionnellement, et donc le résultat final est plus proche de la maquette.

Par contre l’inconvénient c'est le calcul des tailles, mais surtout que le ratio largeur/hauteur change énormément sur les device Android. Ce qui peut provoquer la distorsion de certains éléments. (vu le résultat pas satisfaisant).

Donc, vous optez plus pour les dimensions en %, et tout ce qui est police, en REM avec des média queries pour baisser/augmenter le texte ?