Javascript deaktiviert den vertikalen Bildschirm

Mit der Popularität von Smartphones und Tablets beginnen immer mehr Websites, mobile Versionen zu entwerfen und zu entwickeln. Auf mobilen Geräten können Benutzer im Gegensatz zu Desktop-Computern die Ausrichtung des Geräts nach Belieben anpassen, also horizontal oder vertikal, was ebenfalls gewisse Probleme mit sich bringt. Wenn beispielsweise eine Website im Hochformat angezeigt wird, ist der angezeigte Inhalt möglicherweise zu schmal und schwer zu lesen und zu bedienen. Wenn der Benutzer in den Querformatmodus wechselt, ist die Seite möglicherweise nicht richtig positioniert oder kann aufgrund von Layoutproblemen nicht angezeigt werden. Daher hoffen einige Entwickler, der Webseite die Funktion zum Deaktivieren des vertikalen Bildschirms hinzufügen zu können, sodass die Seite nur im Querformat angezeigt werden kann. Hier kommt JavaScript zum Einsatz.

1. Was ist JavaScript?

JavaScript ist eine Skriptsprache, die hauptsächlich zur Entwicklung von Internet-Frontends, also browserseitigen interaktiven Designs, verwendet wird. Es versteht sich, dass HTML die Struktur und der Inhalt der Seite ist, CSS das Erscheinungsbild und der Stil der Seite und JavaScript die Funktion und der dynamische Effekt der Seite. Durch in JavaScript geschriebene Skripte kann die Seite einige spezifische Antworten und Verhaltensweisen implementieren, wie z. B. Bestätigungsformulare, Popup-Boxen, Karussellbilder usw.

2. Wie deaktiviere ich den vertikalen Bildschirm?

1. CSS-Stile verwenden

Eine einfache Möglichkeit besteht darin, CSS-Stile zu verwenden. Sie können die Breite der Seite auf 100 % der Bildschirmhöhe einstellen, sodass die gesamte Seite nur im Querformat vollständig angezeigt werden kann Hochformatmodus Es können nicht alle Inhalte angezeigt werden.

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

Unter diesen stellt die vh-Einheit 1 % der Höhe des Ansichtsfensters dar. Diese Lösung ist nur für absolut positionierte Elemente und flüssiges Layout (Responsive Layout) geeignet. Allerdings verhindert diese Methode nicht wirklich, dass das Gerät in den Hochformatmodus wechselt, und Benutzer können die Ausrichtung immer noch ändern, indem sie das Gerät drehen.

2. Medienabfragen verwenden

Eine andere Möglichkeit ist die Verwendung der @media-Medienabfrageregel in CSS3. Sie können Bedingungen festlegen, wenn die Gerätehöhe kleiner als die Gerätebreite ist. Fügen Sie einen Rotationsstil hinzu, um den Inhalt automatisch um 90 Grad zu drehen, sodass die Seite immer im Querformat angezeigt wird. Auf diese Weise wird die Seite immer im Querformat angezeigt, egal wie der Benutzer das Gerät dreht.

@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;
    }
}

Es ist zu beachten, dass diese Methode erfordert, dass alle Inhalte um 90 Grad gedreht werden, einschließlich Text, Bilder, Schaltflächen usw. Dadurch kann die Seite zwar im Querformat angezeigt werden, das Erscheinungsbild und die Erfahrung der Seite werden jedoch stark beeinträchtigt und es kommt auch zu großen Unannehmlichkeiten während des Entwicklungs- und Wartungsprozesses.

3. Verwenden Sie JavaScript

Zusätzlich zu den beiden oben genannten Methoden können Sie auch JavaScript verwenden, um den vertikalen Bildschirm basierend auf der Ausrichtung des Geräts zu deaktivieren. Der Code lautet wie folgt:

<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>

Durch die Bestimmung der Ausrichtung des Geräts wird die Seite ausgeblendet, wenn sich das Gerät im Hochformat befindet, und es erscheint ein Eingabeaufforderungsfeld, das den Benutzer auffordert, wieder in den Querformatmodus zu wechseln. Die Seite wird erneut angezeigt, wenn die Geräteausrichtung in den Querformatmodus geändert wird.

Es ist zu beachten, dass Sie bei der Verwendung von JavaScript zum Deaktivieren des vertikalen Bildschirms das Ereignis einer Änderung der Geräteausrichtung berücksichtigen müssen. Das Ereignis orientationchange wird hier verwendet. Da außerdem der UserAgent (Benutzeragent) verschiedener Geräte und Browser unterschiedlich sein kann, sind ausreichende Tests und Anpassungen erforderlich, um die Stabilität und Kompatibilität des Codes sicherzustellen.

3. Zusammenfassung

Ob Sie CSS-Stile, Medienabfragen oder JavaScript verwenden, es handelt sich im Wesentlichen um Vorgänge und Stiländerungen an der Seite, um den Zweck zu erreichen, den vertikalen Bildschirm zu verhindern. Es ist jedoch zu beachten, dass das Verbot vertikaler Bildschirme an sich etwas umstritten ist. Einige Benutzer haben möglicherweise das Gefühl, dass dadurch ihr Recht auf freie Rotation ihrer Geräte eingeschränkt wird, was möglicherweise einen schlechten Eindruck von der Website hervorruft. Aber auf jeden Fall sollten wir die Wahl des Benutzers respektieren und eine Seite mit einem besseren Benutzererlebnis erstellen.

Das obige ist der detaillierte Inhalt vonJavascript deaktiviert den vertikalen Bildschirm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!