Quelle est la différence entre la largeur de l'appareil et la largeur en CSS

1. largeur du périphérique

Définition : Définissez la largeur visible de l'écran du périphérique de sortie.

Que votre page Web soit ouverte dans Safari ou intégrée dans une vue Web, la largeur de l'appareil est uniquement liée à votre appareil. S'il s'agit du même appareil, sa valeur ne changera pas.

Par exemple, la largeur de l'appareil*la hauteur de l'appareil de l'iPhone6 ​​​​est de 375*667, ce qui n'a rien à voir avec son dpr, etc.

(Tutoriel recommandé : Tutoriel CSS)

2 largeur

Définition : Définir la largeur de la zone visible de la page dans le périphérique de sortie.

La sortie est la largeur et la hauteur de la zone visible de votre page Web. En supposant que votre page Web soit une page Web mobile imbriquée dans une vue Web, la largeur est en fait la largeur et la hauteur de la vue Web. dans différents navigateurs, la largeur et la hauteur peuvent également être différentes, et si votre page utilise la mise en page rem, et pour les écrans Retina, dpr>1, content="width=device-width, initial-scale=0.5, est défini dans la balise méta . minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover", la largeur de votre iPhone 6 sera de 750 pixels.

J'utilise davantage la largeur et la hauteur de l'appareil ici, car il n'est pas nécessaire de prendre en compte la situation de l'écran horizontal

Par exemple, si vous vous adaptez à l'iphoneX, vous connaissez déjà l'iphoneX ( 375 *812), vous pouvez utiliser l'instruction suivante :

@media screen and (device-width: 586px) and (device-height: 820px){
    html{
        font-size: 110px !important;
    }
}

En bref, la largeur de l'appareil ne changera pas dans un appareil. Sa valeur est liée aux changements de largeur de l'appareil dans différents schémas de disposition ou différents affichages. dans le conteneur peut être différent. Ici, je pense que la largeur de l'appareil est équivalente à window.screen.width de js, et la largeur est équivalente à document.body.clientWidth de js.

Enregistrez également mon adaptation de l'écran pliable Huawei. Comme il n'y a pas de vrai téléphone pour le moment, je sais seulement que la résolution de Huawei lorsqu'il est déplié est de 2200*2480, et le DPR n'est pas encore clair, donc je Je ne connais pas la largeur et la hauteur de l'appareil (je ne peux pas utiliser la largeur pour effectuer des requêtes ici, la raison est liée à la logique métier), j'ai donc choisi le rapport d'aspect de l'appareil,

Au début, j'ai était dans mon less C'est écrit comme ceci

@media (device-aspect-ratio: 55/62) {
    /*适配*/
}

Ensuite, le rapport d'aspect du périphérique en CSS est calculé sous forme décimale

@media (device-aspect-ratio: 0.887097) {
    /*适配*/
}

le rapport d'aspect du périphérique ne prend pas en charge les décimales, il ne peut donc pas correspondre

J'ai donc vérifié les résultats sur la façon d'empêcher less d'exécuter 55/62, et j'ai trouvé qu'il suffisait de mettre l'attribut entre guillemets et d'ajouter un tilde devant, comme ceci :

@media (device-aspect-ratio: ~"55/62") {
    /*适配部分*/
}

Problème résolu !

Cependant, le ratio d'aspect de l'appareil n'est plus recommandé sur MDN, et cet attribut sera abandonné.

Tutoriels vidéo associés recommandés : Tutoriel vidéo CSS

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!