wake-up-neo.net

Mobile Site - Nur Landschaft erzwingen/keine automatische Drehung

Ich habe eine Website, die über ein mobiles Stylesheet verfügt:

<link rel="stylesheet" href="css/mobile.css" media="handheld">

Ich verwende auch jQuery, um nach mobilen Geräten zu suchen und die Funktionalität entsprechend zu ändern.

Ich möchte jedoch wissen, ob es eine Möglichkeit gibt, nur die Querformatausrichtung zu erzwingen und das automatische Drehen zu deaktivieren. Entweder eine CSS- oder eine jQuery-Lösung wäre in Ordnung.

Vielen Dank!

23
Joey

Verwenden Sie Medienabfragen, um die Ausrichtung zu testen, blenden Sie im Hochformat-Stylesheet alles aus und zeigen Sie an, dass die App nur im Querformat funktioniert.

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

Ich denke, das ist der beste Ansatz

17
daver

Sie können die Ausrichtung auf Webseiten nicht erzwingen, Sie können jedoch Inhalte im Portarit-Modus vorschlagen oder blockieren. 

Ich habe eine Anpassung gemacht von einem vorhandenen Skript

fügen Sie in Ihrer HTML-Datei ein div-Element hinzu 

<div id="block_land">Turn your device in landscape mode.</div>

Passen Sie dann Ihre CSS an, um alle Ihre Seite abzudecken 

#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}

Fügen Sie dann ein kleines Javascript hinzu, um die Ausrichtung zu ermitteln 

function testOrientation() {
  document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}

Vergessen Sie nicht, die Ausrichtung in der Onload- und Onorientierungsänderung zu testen, möglicherweise in Ihrem Body-Tag

<body onorientationchange="testOrientation();" onload="testOrientation();">

Lassen Sie mich wissen, ob diese Lösung für Sie funktioniert.

16
Yoann

Ich denke, der beste Ansatz ist das Skript, das sich ändert, wenn sich der Benutzer ändert. Ich habe dies so geändert, dass Ihre Seitenhaupt-DIV im Hochformat gedreht wird, sodass der Benutzer gewechselt werden muss. Wenn sie ihren Kopf nicht zur Seite neigen wollen:

<script type="text/javascript">
    (function () {
        detectPortrait();
        $(window).resize(function() {
            detectPortrait("#mainView");
        });


        function detectPortrait(mainDiv) {
            if (screen.width < screen.height) {
                $(mainDiv).addClass("portrait_mode");
            }
            else {
                $(mainDiv).removeClass("portrait_mode");
            }
        }
    })();
</script>
<style type="text/css">
    .portrait_mode {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>
3
Thomas Watson

Eine einfache Methode zum Erzwingen der Querformatausrichtung ist das Festlegen der Min-Max-Breite in Ihrem CSS-Code

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { 
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0; 
}}

hoffe, löse dein problem.

Ich habe folgenden Code ausprobiert und den Browser dazu gezwungen, den Hochformatmodus zu verwenden:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

Dieser Code wurde auf einem iPhone und auf einem anderen Mobilgerät getestet.

0
Wissam El-Kik