Les principes de base et les méthodes d'utilisation détaillées de la fenêtre

Auteur：Eve Cole Date de mise à jour：2025-04-16 21:32:01

1. Résumé de la fenêtre

Les navigateurs mobiles rendent généralement les pages dans une fenêtre virtuelle plus large que l'écran. Cette fenêtre virtuelle est la fenêtre. Le but est d'afficher normalement des pages Web qui ne sont pas adaptées au terminal mobile, afin qu'ils puissent être entièrement affichés aux utilisateurs. Parfois, lorsque nous utilisons des appareils mobiles pour accéder à la page Web de bureau, nous verrons une barre de défilement horizontale et la largeur de la zone d'affichage ici est la largeur de la fenêtre.

Régulièrement, si la page peut être mise à l'échelle, utilisez le code suivant

<meta name = visette contenu = width = device-width, initial-scale = 1 />

Si vous ne souhaitez pas zoomer, utilisez le code suivant

<meta name = Viewport Content = width = Device-Width, Initial-Scale = 1,0, minimum-échelle = 1,0, maximum-échelle = 1,0, utilisateur-échec = no>

2. La différence entre les pixels et les pixels de l'appareil dans CSS

Lors du développement de pages Web de bureau, 1px dans CSS est 1px sur l'appareil; Cependant, 1px dans CSS n'est qu'une valeur abstraite, qui ne représente pas les pixels réels; Alors que dans les appareils mobiles, la densité de pixels de différents appareils est différente, et 1px dans CSS peut ne pas être égal à une valeur de pixel du dispositif réel. La mise à l'échelle de l'utilisateur modifiera également le nombre de pixels de périphérique 1px dans CSS. Ce rapport est devicePixelratio

Pixels physiques / pixels indépendants = devicePixelratio

Nous pouvons zoomer dans le navigateur et imprimer la fenêtre.DevicePixelratio dans la console pour voir la taille de DevicePixelratio. Les pixels indépendants peuvent être compris comme PX dans CSS.

3. Bases de la fenêtre

Code:

Voici plusieurs propriétés de la fenêtre. Ces propriétés peuvent être utilisées de manière mixte. Plusieurs propriétés doivent être séparées par des virgules en même temps. Ici, nous élargissons un concept appelé Ideal Finport, qui fait référence à la fenêtre dans des circonstances idéales. Il peut visualiser normalement tout le contenu de la page Web sans échelle de l'échelle des utilisateurs et des barres de défilement horizontal, et peut voir clairement tout texte. Peu importe à quel point ce texte est défini dans CSS, il peut être vu clairement lorsqu'il est affiché.

propriété	décrire
largeur	Contrôle la largeur de la fenêtre, vous pouvez spécifier un nombre; ou définir la largeur de l'appareil pour spécifier
hauteur	Contrôlez la hauteur de la fenêtre. Cette propriété n'est pas très importante et rarement utilisée.
échelle initiale	Contrôlez le niveau de zoom sous IdealViewport lorsque la page est initialement chargée, généralement définie sur 1, ce qui peut être décimal
à l'échelle maximale	Permet à la valeur de mise à l'échelle maximale de l'utilisateur d'être un nombre et peut être décimal
À l'échelle minimale	Permet à la valeur de mise à l'échelle minimale de l'utilisateur d'être un nombre, qui peut être pris avec des décimales.
à l'échelle des utilisateurs	Que l'utilisateur soit autorisé à évoluer, la valeur est non ou oui, non signifie non autorisé, oui signifie permettre

4. Réversement avancé

1. largeur et échelle initiale

Lorsque la largeur et l'échelle initiale sont définies, le navigateur sélectionnera automatiquement la plus grande valeur d'adaptation. Actif:

<méta-name = contenu de la vue = width = 400, échelle initiale = 1>

Le navigateur sélectionnera une grande valeur à s'adapter. Si la largeur de la fenêtre de la fenêtre actuelle est de 300 et que la valeur à l'échelle initiale est 1, la valeur de la largeur est obtenue; Si la fenêtre idéale de la fenêtre actuelle est de 480, 480 est sélectionnée.

En fait, la largeur = largeur de périphérique et l'échelle initiale = 1 représentent tous les deux l'application de la fenêtre idéale, mais sur les appareils mobiles tels que l'iPad et l'iPhone et IE, les écrans horizontaux et verticaux ne sont pas distingués, et la largeur de l'écran vertical est prise par défaut. La meilleure façon d'écrire la compatibilité est

<meta name = Viewport Content = width = Device-Width, Initial-Scale = 1>

2. Changez dynamiquement les attributs

un. document.write ()

Document.Write ('<Meta name = Viewport Content = Width = Device-Width, Initial-Scale = 1>')

B.SetAttribute

var mvp = document.getElementById ('TestViewport');
mvp.setAttribute ('Content', 'width = 480');

vision

Différence entre les pixels et les pixels de l'appareil dans CSS

Pixels physiques / pixels indépendants = devicePixelratio

Bases de la fenêtre

Un site typique optimisé par mobile contient du contenu similaire à ce qui suit:

<meta name = Viewport Content = width = Device-Width, Initial-Scale = 1, Maximum-Scale = 1>

propriété	décrire
largeur	Contrôle la largeur de la fenêtre, vous pouvez spécifier un nombre; ou définir la largeur de l'appareil pour spécifier
hauteur	Contrôlez la hauteur de la fenêtre. Cette propriété n'est pas très importante et rarement utilisée.
échelle initiale	Contrôlez le niveau de zoom sous IdealViewport lorsque la page est initialement chargée, généralement définie sur 1, ce qui peut être décimal
à l'échelle maximale	Permet à la valeur de mise à l'échelle maximale de l'utilisateur d'être un nombre et peut être décimal
À l'échelle minimale	Permet à la valeur de mise à l'échelle minimale de l'utilisateur d'être un nombre, qui peut être pris avec des décimales.
à l'échelle des utilisateurs	Que l'utilisateur soit autorisé à évoluer, la valeur est non ou oui, non signifie non autorisé, oui signifie permettre

La fenêtre avancée