Découvrir le design responsive

Contrôler les viewports

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à contrôler les viewports avec les metatags et les règles CSS (Cascade Style Sheet, feuilles de style en cascade). Vous devrez également tenir compte de tous les paramètres et des opérateurs.

Transcription

Maintenant que nous avons défini ce que sont les viewports pour les mobiles, nous allons voir la façon de les contrôler. À l'heure actuelle, il existe deux mécanismes, deux techniques de base pour remplacer la fenêtre d'affichage par défaut du navigateur. Vous allez pouvoir utiliser, soit la balise meta viewport, ou vous allez pouvoir utiliser une règle CSS@ viewport. Ces deux techniques vont utiliser une syntaxe assez similaire. Nous allons donc voir des exemples de code pour chacun d'entre eux, et puis nous allons décrire leurs effets sur la fenêtre. La balise meta viewport est placée dans l'en-tête de votre site internet. Il s'agit d'une balise meta et pour cette balise meta, on précise que son nom est viewport, et puis on va définir ensuite le contenu de cette balise, c'est-à-dire sa largeur et puis son échelle initiale. La règle CSS@viewport peut être placée n'importe où dans votre CSS, mais comme cela peut affecter les média-queries, les requêtes medias, il est recommandé de placer cette règle avant toute les medias-queries dans vos styles. La plupart des concepteurs placent cette règle directement en tête de leur style comme étant une de leurs premières balises de style. On va ici préciser qu'il s'agit de la règle @viewport, et puis on va définir la largeur, et puis on va définir un niveau de zoom. Voyons l'impact de ces règles et de ces balises sur un affichage d'une page web sur un téléphone portable. Nous sommes ici sur un téléphone portable et vous voyez que cette page s'affiche vraiment en tout petit. Nous allons modifier ces valeurs en fixant le viewport à 320 pixels. Et vous voyez que maintenant, notre page s'affiche correctement dans notre navigateur. Il y a donc un lien direct de cause à effet entre la fixation du viewport par rapport à la taille de votre écran. Notez que tous les écrans n'ont pas une largeur à 320 pixels de large, et qu'il va falloir que l'on puisse travailler avec éventuellement d'autres systèmes. C'est la raison pour laquelle on peut travailler avec un viewport qui va être basé sur une valeur en pixels, mais on peut également travailler avec un viewport qui va être, comme c'est le cas ici, basé sur la largeur de l'écran du périphérique sur lequel on va consulter la page web. Donc à moins d'avoir une raison d'utiliser une valeur en pixels, il est beaucoup plus intéressant d'utiliser une valeur qui va être liée à la largeur de l'écran du périphérique. Alors on pourrait également définir la hauteur du viewport, mais en général c'est quelque chose qui ne se fait pas. Ensuite on va définir d'autres éléments qui vont être également très intéressants. Nous avons vu que nous avons pu définir quelle était la largeur du viewport, de la zone d'affichage, que nous avons pu également fixer cette valeur pour la caler sur la largeur de l'écran du périphérique. Vous voyez que dans ces deux cas ici, nous le voyons, à gauche avec la balise meta, et puis à droite avec la règle de CSS. Mais nous allons pouvoir également fixer un élément qui est très intéressant, qui est l'échelle initiale. Nous avions vu dans la vidéo précédente que l'échelle initiale était très importante. Si vous fixez une échelle initiale de 2, cela veut dire que votre page s'affichera avec un zoom de 200 % par rapport à sa taille réelle sur le périphérique sur lequel vous allez consulter votre page web. Vous pouvez donc tout à fait définir au niveau du viewport une échelle initiale qui est une échelle initiale de 1, c'est-à-dire un zoom qui va être à 100 %. Il n'y aura donc pas d'agrandissement de votre page. On voit fréquemment une combinaison de ces deux instructions, c'est-à-dire de demander à ce que le viewport soit calé sur la largeur du périphérique device-width, et également on demande une échelle initiale de 1. Mais c'est quelque chose qui n'est pas obligatoirement nécessaire, puisqu'à partir du moment où vous demandez à être calé sur la largeur du périphérique, si vous ne spécifiez pas cette échelle, elle sera de 1. Et puis, en raison de bugs qui pourraient apparaître sur des périphériques AIOS, qui vont affecter des pages lorsque l'orientation va changer avec une échelle initiale de 1, certains développeurs conseillent même de ne pas régler cette échelle initiale, à moins de vouloir bien entendu une autre valeur que 100 %. Vous pouvez également définir une échelle d'agrandissement minimum, 1, et une échelle maximum d'agrandissement, ici 2, à la fois avec les deux syntaxes. Cela permettra à l'utilisateur de zoomer sur votre page, mais dans une plage délimitée par un minimum et un maximum. Notez que avec la balise meta vous allez placer des chiffres entier, 1, 2, et que vous pourriez, dans la balise @viewport, ajouter des valeurs en pourcentage. Mais les valeurs indiquées avec des entiers comme c'est le cas ici fonctionnent également. Et puis si vous souhaitez que l'utilisateur ne puisse pas zoomer sur la page, eh bien vous allez pouvoir le préciser. Vous voyez qu'ici nous avons les deux syntaxes pour préciser à l'utilisateur qu'il ne peut pas redimensionner la page en zoomant sur cette page avec ses doigts sur son téléphone. A gauche, nous avons User-scalable =no, et à droite nous avons niveau de zoom fixed, User-zoom=fixed, c'est à dire que,pour obtenir la même chose, à gauche nous n'autorisons pas l'utilisateur à redimensionner la page, et à droite nous fixons un niveau de zoom. Nous avons donc vu deux possibilités, deux balises possibles. Laquelle utiliser ? Si vous utilisez la balise meta, vous êtes dans une norme qui est une norme universelle. Alors qu'avec la balise CSS@viewport, vous allez devoir ajouter un préfixe. Il va donc falloir préciser des préfixes, à la fois pour moz pour mozilla, pour webkit, pour o pour opéra, et puis ms pour Microsoft. Donc il est préférable pour l'instant de travailler encore avec la balise meta name = " viewport ". L'adoption de @viewport se propage assez rapidement et nous nous attendons à avoir un support complet de cette balise dans un avenir assez proche. Une fois que cela se produira, nous pourrons donc l'employer de façon massive, de manière à pouvoir contrôler les vues du navigateur lors de la création de nos design responsive.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !