1476 sujets

Web Mobile et responsive web design

Bonjour,
j'ai lu attentivement le Comprendre le Viewport dans le Web mobile de Raphael et je voudrais poser des questions basiques.
Si j'ai bien compris, on doit aussi rajouter, en plus du meta name="viewport" dans le head, dans le css :
@viewport {
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}

Qu'en est-il des landscape ? Dans un article sur le web, il est conseillé de rajouter :
@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

Qu'en pensez-vous ? Est-ce utile ?
Merci d'avance
J'ai oublié une question subsidiaire.
J'ai vu que Bootstrap utilise un viewport de 992px. Cette mesure est citée, me semble-t-il que dans cette grille.
Cela correspond à quoi ? Vaut-il mieux en raccourci 768, 1024 et 1200 ?
Merci d'avance
osiris67 a écrit :
Si j'ai bien compris, on doit aussi rajouter, en plus du meta name="viewport" dans le head, dans le css.

Non, la déclaration html suffit, la version css étant une possibilité récente et plus souple de déclarer l'instruction.

Quand à Bootstrap, sa déclaration est en lien avec les breakpoints de ses grilles, breakpoints qui ne correspondent sans doute pas aux vôtres.
Administrateur
Bonjour,

à propos des breakpoints, je crois que l'un de leurs arguments est d'avoir des valeurs tombant entre de grandes catégories de résolutions : entre smartphone et tablette, entre tablette et desktop (enfin du temps des 14" : 1024 donc plutôt petites tablettes et "grandes" comme l'iPad) et entre 1024 et desktop de maintenant (>= 1280px et largement plus).
Mais il ne faut pas essayer de trop catégoriser... toutes les résolutions sont dans la nature, toutes et parfois proches pour des appareils de nature différente.

Bootstrap est un tout-terrain qui propose des composants dont une grille adaptée à beaucoup de situations, au plus grand nombre. Quand on travaille sur un site particulier, on aura d'autres réflexions et contraintes et choix finaux.
Du coup il faut préciser aussi qu'à une époque on avait l'habitude de faire des break points en fonction des résolutions d'écran les plus courantes, mais devant la multiplicité des formats cette approche s'est effacée peu à peu devant une autre beaucoup plus pérenne : il ne s'agit plus de prévoir des points de rupture en fonction des résolutions d'écran mais de les calquer sur la grille proposée par le site.

Avec cette approche, si le site est bien réalisé, plus aucun problème de compatibilité avec quelque écran que ce soit.