Partagez l'attribut viewport pour résoudre le problème de réinitialisation de la police lors du passage de l'écran vertical à l'écran horizontal sur le terminal mobile.

Cet article partage l'attribut viewport pour résoudre le problème de réinitialisation de la police lors du passage de l'écran vertical à l'écran horizontal sur le terminal mobile. Lorsque j’ai commencé à travailler dessus, je n’ai jamais testé la page sur mon téléphone portable. En conséquence, après avoir écrit plusieurs pages, j’ai découvert que la page était extrêmement petite et presque invisible.

La raison est que chaque appareil mobile a sa propre largeur de fenêtre par défaut.

Porte d'affichage : il existe deux fenêtres d'affichage dans les navigateurs mobiles : la fenêtre d'affichage visible (taille de l'écran de l'appareil) et la fenêtre d'affichage du navigateur (largeur de la page Web).

Prenons l'exemple de l'iPhone 4s. Son écran est de 320*480, mais il peut afficher du contenu avec une largeur de 980 pixels (la valeur par défaut pour les iPhones est de 980), donc lorsque vous mettez une page Web sur le mobile. côté et affichez-le, cela équivaut à Rétréci de 980/320. Le but de faire cela sur les téléphones portables est d'afficher plus de choses, mais le résultat est que les pages faites sur le PC sont aussi petites que des fourmis sur le terminal mobile !

La version mobile a une balise méta : viewport Vous pouvez utiliser cette balise pour définir la largeur de la fenêtre d'affichage du navigateur pour qu'elle soit la même que la largeur de la fenêtre d'affichage visible.

<meta name="viewport" content="width=device-width">

Pour certains anciens navigateurs d'appareils mobiles qui ne prennent pas en charge la fenêtre d'affichage (enfin, peut-être, comme BlackBerry), vous pouvez utiliser le code suivant

<meta name="HandheldFriendly" content="true">

Mais je pense que cela devrait be now Peu de gens l'utilisent, il suffit généralement d'écrire la première ligne.

En parlant de fenêtre d'affichage, il a en fait d'autres attributs :

échelle initiale : rapport de mise à l'échelle initial

échelle maximale : la mise à l'échelle est autorisée Maximum scale

minimum-scale : L'échelle minimale autorisée pour la mise à l'échelle

user-scalable : s'il faut autoriser la mise à l'échelle manuelle

À quoi servent ces propriétés ?

Lorsque l'appareil mobile passe du portrait au paysage, la police sera réinitialisée et deviendra très grande. Comment résoudre ce problème ?

Il vous suffit de le définir comme ceci

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1>

Définissez la page comme ceci Le taux de zoom par défaut est de 1, et le zoom autorisé est également de 1-1, ce qui. équivaut à désactiver le zoom. Le navigateur suivra uniquement le style. La taille de police définie est rendue.

Vous verrez peut-être cette façon d'écrire.

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >

Mais en fait, lorsque vous utilisez l'attribut user-scalable=no, minimum-scale=1, maximum-scale=1 ont été ignorés, car vous avez désactivé la mise à l'échelle.

J'ai trouvé des explications plus spécifiques ailleurs :

1) User-scalable=no garantit-il que la page ne peut pas être mise à l'échelle ? NON, certains navigateurs n'aiment pas ça. Une autre astuce est minimum-scale=1.0, maximum-scale=1.0. Définissez simplement le rapport de mise à l'échelle maximum et minimum sur 1,0.

2), initial-scale=1.0 La mise à l'échelle initiale est-elle contrôlée par l'utilisateur ? Pas nécessairement. Certains navigateurs interpréteront la mise à l'échelle par l'utilisateur comme une mise à l'échelle manuelle par l'utilisateur. Si user-scalable=no, la mise à l'échelle initiale ne prendra pas effet.

3). La page mobile peut être déplacée au toucher, mais s'il est nécessaire d'interdire cette opération, la largeur de la page est égale à la largeur de l'écran et la page s'adapte exactement à l'écran pour garantir que la page ne peut pas être déplacé.

4). Si la page est réduite pour s'adapter à la largeur de l'écran, un problème se produira lorsque la zone de texte est activée (obtient le focus), la page sera agrandie à sa taille d'origine.

Ainsi, par souci de sécurité, il est recommandé d'utiliser la deuxième façon d'écrire.

Bien sûr, l'inconvénient est qu'il est interdit aux utilisateurs de zoomer. Il y a un compromis dans "Web Development in Action". Ceux qui sont intéressés peuvent y jeter un œil, mais je ne le décrirai pas ici.

Une petite parenthèse :

Il existe une propriété en CSS3 : -webkit-text-size-adjust.

Cet attribut désactive également la mise à l'échelle des polices. L'avantage de cet attribut est que la plage peut être personnalisée et définie en fonction des exigences du projet.

Il est à noter que la fonction de cet attribut est de désactiver la fonction d'ajustement de la taille du texte du navigateur du noyau Webkit plutôt que de contrôler le zoom de la page. La limite minimale de police de la version chinoise du navigateur Chrome est de 12 px.

Cependant, en raison d'un abus de cet attribut, les navigateurs de bureau ne le supportaient plus il y a quelques années, je ne l'ai donc jamais réellement utilisé, je ne l'ai vu que sur d'autres supports.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Exemple de code sur les problèmes de compatibilité des fenêtres

3 Sujet spécial Viewport : Compréhension approfondie de la conception Web réactive dans CSS-Viewport <.>

Introduction aux paramètres de Viewport en HTML5 et comment l'utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!