interface Webjs tutorielAnalyse de la relation entre la fenêtre et les attributs associés (image)Analyse de la relation entre la fenêtre et les attributs associés (image)
Ce que cet article vous apporte, c'est l'analyse (image) de la relation entre la fenêtre d'affichage et les attributs associés. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Pas grand chose à dire, allons droit au but
Ceux qui ont une compréhension générale des viewports doivent savoir qu'il existe trois types de viewports
Fenêtre de mise en page
fenêtre visuelle
fenêtre idéale
correspondant Il y a 5 propriétés associées
width : Définissez la largeur de la fenêtre de mise en page sur une valeur spécifique
initial-scale : Définissez l'initialisation de la page Le niveau de zoom et largeur de la fenêtre de présentation.
échelle minimale : définir le niveau de zoom minimum
échelle maximale : définir le niveau de zoom maximum
évolutif par l'utilisateur : s'il faut empêcher l'utilisateur de zoomer
Pourquoi il n'y a pas de fenêtre idéale : parce que la fenêtre idéale est le navigateur Il est normal que la fenêtre idéale définie par vous-même soit incohérente sur les différents appareils de navigation.
Porte d'affichage de mise en page
La largeur habituelle pour les appareils mobiles est comprise entre 240 et 640 pixels, mais pour de nombreux sites Web de bureau, la largeur est le tout au-dessus de 800 pixels. Une barre latérale de 35 % semble normale sur un ordinateur de bureau, mais sera très étroite sur un téléphone mobile. Afin de résoudre ce problème. De nombreux fabricants de navigateurs mobiles conçoivent la largeur de la fenêtre d'affichage pour qu'elle soit beaucoup plus large que la taille de l'écran, allant de 768 à 1 024, mais la largeur courante est de 980 px.
L'image ci-dessous est la largeur correspondant au terminal mobile lorsqu'aucune méta viewport n'est ajoutée (elle est également de 980 sur iPhone 8p)
Lorsque le navigateur rencontre un site Web qui n'est pas optimisé pour les mobiles, le navigateur réduira le site Web autant que possible afin que l'utilisateur puisse voir l'intégralité du site Web.
La largeur dans la méta de la fenêtre est utilisée pour définir la fenêtre de présentation. En plus de la largeur commune du périphérique, elle peut également être définie sur une valeur fixe, telle que 600.
La mise en page CSS est calculée en fonction de la fenêtre de mise en page et est contrainte par celle-ci.
Comme indiqué ci-dessous, la largeur de la barre rose est basée sur 600 * 30% = 180
initial- Scale est également utilisé pour définir la fenêtre de présentation, qui est différente de l'échelle minimale et de l'échelle maximale.
Largeur de la fenêtre de mise en page = largeur idéale de la fenêtre/échelle initiale, donc la largeur de la fenêtre de mise en page dans l'image ci-dessous est égale à 106
Visual Viewport
La fenêtre d'affichage visuelle fait référence à la zone du site Web que l'utilisateur consulte. Les utilisateurs peuvent utiliser la fenêtre visuelle en zoomant, sans affecter la fenêtre de mise en page
Dans des circonstances normales, la fenêtre visuelle n'est pas importante pour les développeurs, mais si elle est vraiment nécessaire, la fenêtre peut être utilisé. innerWidth/Height peut obtenir la valeur visuellement acceptable actuelle (il y aura des problèmes avec Android webkit2 et les navigateurs proxy)
Porte d'affichage idéale
En parlant de la fenêtre de mise en page, il a été mentionné que la largeur par défaut de la fenêtre de mise en page est généralement d'environ 980 pour s'adapter à la largeur de la page web du bureau, mais ce n'est pas une largeur idéale du côté mobile, donc navigateur les fabricants ont introduit le concept de fenêtre d'affichage idéal.
La fenêtre d'affichage idéale est la plus idéale pour l'appareil La taille de la fenêtre de mise en page a la largeur la plus idéale pour la navigation et la lecture.
La fenêtre d'affichage idéale est définie par le navigateur et ne relève pas du travail de l'appareil ou du système d'exploitation. Ainsi, différents navigateurs sur le même appareil peuvent avoir des largeurs d'ajustement idéales différentes.
La largeur idéale de la fenêtre changera à mesure que l'appareil change (à l'exception des premiers Safari, qui peuvent être résolus avec initial-scale=1. Je viens de l'essayer avec l'iPhone 8p, et la fenêtre idéale changera automatiquement après rotation de l'appareil)
Les deux méthodes suivantes peuvent définir la largeur de la fenêtre de mise en page sur la largeur de la fenêtre idéale, mais la première méthode ne changera pas après la rotation de l'appareil au début de Safari, et la deuxième méthode aura une largeur incorrecte sous IE 10, donc le troisième type est la fenêtre d'affichage parfaite
<meta> <meta> <meta>
Toute la mise à l'échelle est basée sur la largeur idéale de la fenêtre l'échelle maximale et l'échelle minimale sont déterminé en fonction de la fenêtre idéale, n'a rien à voir avec la largeur de la fenêtre de mise en page.
Dans l'image ci-dessous, la largeur idéale de la fenêtre d'affichage est de 320 px et la fenêtre de mise en page est définie sur 160 px. La capture d'écran est lorsque j'ai zoomé au maximum et la largeur de la fenêtre visuelle correspondante est de 32 px (la largeur de 2). roses), qui est la largeur idéale de la fenêtre d'affichage /10 fois la largeur
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!
Javascript et le web: fonctionnalité de base et cas d'utilisationApr 18, 2025 am 12:19 AMLes principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.
Comprendre le moteur JavaScript: détails de l'implémentationApr 17, 2025 am 12:05 AMComprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisationApr 16, 2025 am 12:12 AMPython convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.
Python vs JavaScript: communauté, bibliothèques et ressourcesApr 15, 2025 am 12:16 AMPython et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.
De C / C à JavaScript: comment tout cela fonctionneApr 14, 2025 am 12:05 AMLe passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.
Moteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AMDifférents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.
Au-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AMLes applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.
Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AMJ'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Version Mac de WebStorm
Outils de développement JavaScript utiles
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
Dreamweaver Mac
Outils de développement Web visuel
