javascript désactiver l'écran vertical

Avec la popularité des smartphones et des tablettes, de plus en plus de sites Web commencent à concevoir et développer des versions mobiles. Sur les appareils mobiles, contrairement aux ordinateurs de bureau, les utilisateurs peuvent régler à volonté l'orientation de l'appareil, c'est-à-dire l'écran horizontal ou vertical, ce qui pose également certains problèmes. Par exemple, lorsqu'un site Web est affiché en mode portrait, le contenu affiché peut être trop étroit et difficile à lire et à utiliser. Lorsque l'utilisateur passe en mode paysage, la page peut être déplacée ou incapable de s'afficher en raison de problèmes de mise en page. Par conséquent, certains développeurs espèrent ajouter la fonction de désactivation de l'écran vertical à la page Web afin que la page ne puisse être affichée qu'en mode paysage. C'est là que JavaScript s'avère utile.

1. Qu'est-ce que JavaScript ?

JavaScript est un langage de script principalement utilisé pour développer un front-end Internet, c'est-à-dire une conception interactive côté navigateur. On peut comprendre que HTML est la structure et le contenu de la page, CSS est l'apparence et le style de la page et JavaScript est la fonction et l'effet dynamique de la page. Grâce à des scripts écrits en JavaScript, la page peut implémenter certaines réponses et comportements spécifiques, tels que des formulaires de vérification, des boîtes contextuelles, des images de carrousel, etc.

2. Comment désactiver l'écran vertical ?

1. Utiliser les styles CSS

Un moyen simple consiste à utiliser des styles CSS, vous pouvez définir la largeur de la page à 100 % de la hauteur de l'écran, afin que la page entière puisse être entièrement affichée uniquement en mode paysage et en mode portrait Tout le contenu ne peut pas être affiché.

<style>
body{
    width:100vh;
    overflow-x:hidden;
}
</style>

Parmi eux, l'unité vh représente 1% de la hauteur de la fenêtre. Cette solution ne convient qu'aux éléments positionnés de manière absolue et à la mise en page fluide (Responsive Layout). Cependant, cette méthode n'empêche pas réellement l'appareil de passer en mode portrait, et les utilisateurs peuvent toujours changer d'orientation en faisant pivoter l'appareil.

2. Utiliser des requêtes multimédias

Une autre façon consiste à utiliser la règle de requête multimédia @media en CSS3. Vous pouvez définir des conditions Lorsque la hauteur de l'appareil est inférieure à la largeur de l'appareil, ajoutez un style de rotation pour faire pivoter automatiquement le contenu de 90 degrés afin que la page soit toujours en mode paysage. De cette façon, quelle que soit la façon dont l'utilisateur fait pivoter l'appareil, la page sera toujours affichée en mode paysage.

@media screen and (orientation: portrait){
    //竖屏模式下的CSS样式
    body{
        transform: rotate(90deg);
        transform-origin: right top; /*定位基点为屏幕右上角*/
        width:100vh;
        overflow-x:hidden;
        position:absolute;
        top:100%; /*将页面定位到屏幕底部*/
        left:0;
    }
}

Il convient de noter que cette méthode nécessite que tout le contenu soit pivoté de 90 degrés, y compris le texte, les images, les boutons, etc. Bien que cela permette d'afficher la page en mode paysage, l'apparence et l'expérience de la page en seront grandement affectées, et cela causera également beaucoup d'inconvénients pendant le processus de développement et de maintenance.

3. Utilisez JavaScript

En plus des deux méthodes ci-dessus, vous pouvez également utiliser JavaScript pour désactiver l'écran vertical. Cette méthode peut automatiquement déterminer et faire pivoter en fonction de l'orientation de l'appareil. Le code est le suivant :

<script>
window.onload=function(){
    var isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);
    if(isMobile){
        var el = document.getElementsByTagName('body')[0];
        if(window.orientation == 90 || window.orientation == -90){
            el.style.display = 'none';
            alert('请将设备调回竖屏模式');
        }
        window.addEventListener("orientationchange", function() {
            if(window.orientation == 0 || window.orientation == 180){
                el.style.display = 'none';
                alert('请将设备调为横屏模式');
            }else{
                el.style.display = 'block';
            }
        }, false);
    }
};
</script>

En déterminant l'orientation de l'appareil, lorsque l'appareil est en mode portrait, la page sera masquée et une boîte de dialogue apparaîtra pour inviter l'utilisateur à revenir en mode paysage. La page s'affiche à nouveau lorsque l'orientation de l'appareil passe en mode paysage.

Il convient de noter que lorsque vous utilisez JavaScript pour désactiver l'écran vertical, vous devez prendre en compte l'événement de changement d'orientation de l'appareil. L'événement orientationchange est utilisé ici. De plus, étant donné que le userAgent (agent utilisateur) des différents appareils et navigateurs peut être différent, des tests et des adaptations suffisants sont nécessaires pour garantir la stabilité et la compatibilité du code.

3. Résumé

Que vous utilisiez des styles CSS, des requêtes multimédias ou du JavaScript, il s'agit essentiellement d'opérations et de modifications de style sur la page pour atteindre l'objectif d'interdire l'écran vertical. Il convient toutefois de noter que l’interdiction des écrans verticaux est en soi quelque peu controversée. Certains utilisateurs peuvent avoir l’impression que cela restreint leur droit de faire pivoter librement leurs appareils, ce qui peut créer une mauvaise impression du site Web. Mais dans tous les cas, nous devons respecter le choix de l'utilisateur et créer une page offrant une meilleure expérience utilisateur.

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!