Mobile Ansicht - Kraft Landschaft nur/nicht automatisch drehen

Ich habe eine Website, die ein mobiles Sheet hat:Mobile Ansicht - Kraft Landschaft nur/nicht automatisch drehen

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

ich auch jQuery für mobile Geräte zu überprüfen und Funktionalität entsprechend ändern.

Aber ich möchte wissen, ob es eine Möglichkeit gibt, nur Ausrichtung im Querformat zu erzwingen und automatische Drehung zu deaktivieren? Entweder eine CSS- oder eine jQuery-Lösung wäre in Ordnung.

Danke!

Quelle

2012-06-11 Joey

Sie können die Ausrichtung in der Webseite nicht erzwingen, aber Sie können Inhalte im Portarit-Modus vorschlagen oder blockieren.

machte ich eine adaptation eines existing script

in Ihre HTML-Datei, die alle Ihre Seite ein div-Element hinzufügen

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

dann Ihre CSS anpassen

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

Dann ein litle hinzufügen zu decken Javascript zur Erkennung der Orientierung

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

Vergessen Sie die Orientierung in der onload und onorientationchange nicht zu testen, vielleicht in Ihrem Körper Tag

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

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

Quelle

2012-06-11 09:25:28 DoubleYo

Also versuchte ich eine ähnliche Lösung und das Problem, das ich lief, ist mehrere Leute hatten ihre Orientierung gesperrt. Also war es wirklich nervig für sie, sich entsperren zu müssen. Im Idealfall würde die Seite nur im Querformat erscheinen (wie viele Spiele-Apps). Gehen wir zur Verwendung von CSS-Rotation, um es zu lösen. – gman

Verwenden Sie Medienabfragen, um die Ausrichtung zu testen, im Hochformat-Stylesheet verstecken Sie alles und zeigen Sie eine Meldung an, dass die App nur im Querformatmodus 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, am besten aproach

Quelle

2012-10-03 16:49:40 daver

Ich denke, der beste Ansatz ist das Skript, so dass, wenn der Benutzer ändert, ändert sich. Ich habe das so geändert, dass es im Hochformat das DIV Ihrer Seite dreht und den Benutzer zwingt, umzuschalten. Es sei denn, sie ihren Kopf zur Seite kippen 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>

Quelle

2014-02-17 02:12:51

Dies würde definitiv jede JS-Animation und die mobile Reaktionsfähigkeit der Seite unterbrechen.Dies führt zu mehr Problemen für den Entwickler und kann nicht als Fehlerbehebung angesehen werden. –

@ WissamEl-Kik Es macht immer noch, was das OP will. Und wirklich, was das OP verlangt, wird auch die Reaktionsfähigkeit des Handys brechen, also können Sie diese Antwort nicht dafür verantwortlich machen! Es benötigt jedoch nicht wirklich JavaScript; Mit einer Medienanfrage "orientation: portrait" wird dies ebenfalls ausgelöst. –

habe ich versucht, den folgenden Code und es gezwungen, den Browser, um den Portrait-Modus zu verwenden:

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

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

Quelle

2014-09-29 08:10:19

Entschuldigung Sir, ich denke, der Code verhindert nur, dass der Benutzer hinein- oder herauszoomen kann. Getestet auf Safari in iPhone 4S und Chrome in Android 4.3 sind sowohl Quer- als auch Hochformat möglich. –

einfache Art und Weise im Querformat zu zwingen, Ihre Min-Max-Breite in Ihrem CSS-Code festgelegt ist, versuchen Sie mit diesem 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; 
}}

Hoffnung Ihr Problem lösen.

Quelle

2014-12-24 17:14:05

Mobile Ansicht - Kraft Landschaft nur/nicht automatisch drehen

Antwort

Verwandte Themen