Comment utiliser les terminaux mobiles CSS et JS pour déterminer respectivement l'état des écrans horizontaux et verticaux du téléphone mobile

Cet article explique avec vous comment utiliser les terminaux mobiles CSS et JS pour déterminer respectivement l'état des écrans horizontaux et verticaux du téléphone mobile. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. .

Désactivez la fonction de zoom automatique de l'utilisateur :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Il existe deux façons de juger de l'état horizontal et vertical de l'écran : jugement css, jugement js

(1), jugement css Écran horizontal ou vertical

1 Écrivez dans le même fichier CSS

@media screen and (orientation: portrait) {  /*竖屏 css*/} 
@media screen and (orientation: landscape) {  /*横屏 css*/}

Lors du réglage de la taille en fonction de l'écran horizontal et vertical, écrivez simplement la page normale. taille comme d'habitude et définissez le style d'écran horizontal séparément. Autrement dit, il vous suffit d'ajouter un style d'écran horizontal basé sur le style d'origine,

@media screen and (orientation: landscape) {
  /*横屏 css*/}
当用户横屏时加载横屏样式，竖屏时取消横屏样式即加载默认样式。

2. Écrivez-le en deux CSS séparément et référencez différents fichiers de style en fonction des écrans horizontaux et verticaux :

Selon les écrans horizontaux et verticaux L'écran fait référence à différents fichiers de style

Écran horizontal :

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Écran vertical :

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

Remarque : css détermine si l'écran horizontal ou vertical est toujours le même. Il peut être connecté de manière transparente, c'est-à-dire que l'écran horizontal charge le style d'écran horizontal et l'écran vertical charge le style d'écran vertical,

(2) js détermine si l'écran horizontal ou l'écran vertical

//判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {        if (window.orientation === 180 || window.orientation === 0) { 
            console.log("竖屏");
            $(".codeIg_s").removeClass('vercreen');//取消横屏样式        } 
        if (window.orientation === 90 || window.orientation === -90 ){ 
            console.log("横屏");
            $(".codeIg_s").addClass('vercreen');//添加横屏样式        }  
    }, false);

Remarques : Le style d'écran horizontal peut être utilisé normalement en modifiant le style par défaut d'origine sous le nom de la classe vercreen . L'inconvénient est qu'il faut basculer entre les écrans horizontaux et verticaux avant de pouvoir être déclenché.

Si l'utilisateur passe par défaut à l'état d'écran horizontal, le jugement de condition d'écran horizontal ne sera pas déclenché. Le jugement de condition correspondant ne sera déclenché que lorsque l'utilisateur passe du paysage au portrait ou du portrait au paysage. .

Lorsqu'il n'y a pas d'état de commutation, aucun jugement conditionnel ne sera effectué. Ce n'est pas aussi complet que le jugement CSS des écrans horizontaux et verticaux.

Recommandations associées :

Comment utiliser CSS pour obtenir un effet de glissement de texte de bouton

À propos du navigateur jQuery CSS3 fermer- compatibilité Introduction

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!