wake-up-neo.net

Gerätedrehung auf mobilen Webseiten blockieren

Ist es auf meiner Seite möglich, zu erkennen, ob der Benutzer sie mit einem mobilen Gerät im Hochformatmodus besucht, und zum Beispiel die Verwendung von Javascript mithilfe von Javascript. Auf meiner Seite gibt es ein Spiel, das nur für die Anzeige im Hochformat optimiert ist und ich möchte es nicht in der Landschaft.

27
qqryq

Neue APIs werden entwickelt (und sind derzeit verfügbar)!

screen.orientation.lock();   // webkit only

und

screen.lockOrientation("orientation");

Wobei "Orientierung" eine der folgenden sein kann:

portrait-primary - Stellt die Ausrichtung des Bildschirms dar, wenn er sich im primären Hochformat befindet. Ein Bildschirm wird im primären Hochformatmodus betrachtet, wenn das Gerät in seiner normalen Position gehalten wird und sich diese Position im Hochformat befindet oder wenn die normale Position des Geräts im Querformat ist und das Gerät um 90 ° im Uhrzeigersinn gedreht gehalten wird. Die Normalposition ist geräteabhängig.

Hochformat-Sekundär - Stellt die Ausrichtung des Bildschirms dar, wenn er sich im sekundären Hochformat befindet. Ein Bildschirm wird als sekundärer Hochformatmodus betrachtet, wenn das Gerät um 180 ° von seiner normalen Position gehalten wird und sich diese Position im Hochformat befindet oder wenn sich die normale Position des Geräts im Querformat befindet und das gehaltene Gerät um 90 ° gegen den Uhrzeigersinn gedreht wird. Die Normalposition ist geräteabhängig.

landscape-primary - Stellt die Ausrichtung des Bildschirms dar, wenn er sich im primären Landschaftsmodus befindet. Ein Bildschirm wird im primären Landschaftsmodus betrachtet, wenn das Gerät in seiner normalen Position gehalten wird und diese Position im Querformat ist oder wenn die normale Position des Geräts im Hochformat ist und das gehaltene Gerät um 90 ° im Uhrzeigersinn gedreht ist. Die Normalposition ist geräteabhängig.

landscape-secondary - Stellt die Ausrichtung des Bildschirms dar, wenn er sich im sekundären Querformatmodus befindet. Ein Bildschirm wird im sekundären Querformat betrachtet, wenn das gehaltene Gerät um 180 ° von seiner normalen Position entfernt ist und sich diese Position im Querformat befindet oder wenn die normale Position des Geräts im Hochformat ist und das gehaltene Gerät um 90 ° gegen den Uhrzeigersinn gedreht ist. Die Normalposition ist geräteabhängig.

portrait - Es repräsentiert sowohl das Porträt-Primärbild als auch das Porträt-Sekundärbild.

landscape - Sie steht sowohl für Landscape-Primary als auch für Landscape-Secondary.

default - Es steht entweder für das primäre und das primäre Querformat und hängt von der natürlichen Ausrichtung der Geräte ab. Wenn zum Beispiel die Bildschirmauflösung 1280 * 800 ist, wird die Standardeinstellung für das Querformat festgelegt. Wenn die Auflösung 800 * 1280 ist, wird die Standardeinstellung für Hochformat festgelegt.

Mozilla empfiehlt, dem Bildschirm eine lockOrientationUniversal hinzuzufügen, um die Browser-kompatibler zu machen.

screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

Hier finden Sie weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

22
DemiImp

In JavaScript-fähigen Browsern sollte es leicht sein, festzustellen, ob sich der Bildschirm im Quer- oder Hochformat befindet, und mit CSS ausgleichen. Es kann hilfreich sein, den Benutzern die Option zu geben, dies zu deaktivieren oder zumindest zu warnen, dass die Gerätedrehung nicht ordnungsgemäß funktioniert.

Bearbeiten

Die einfachste Möglichkeit, die Ausrichtung des Browsers zu ermitteln, besteht darin, die Breite des Browsers im Vergleich zur Höhe des Browsers zu überprüfen. Dies hat auch den Vorteil, dass Sie wissen, ob das Spiel auf einem Gerät gespielt wird, das natürlich im Querformat ausgerichtet ist (wie bei einigen mobilen Geräten wie der PSP). Dies ist sinnvoller als der Versuch, die Gerätedrehung zu deaktivieren.

Bearbeiten 2

Daz hat gezeigt, wie Sie die Geräteausrichtung erkennen können, aber das Erkennen der Ausrichtung ist nur die Hälfte der Lösung. Wenn Sie die automatische Orientierungsänderung umkehren möchten, müssen Sie alles entweder um 90 ° oder um 270 °/-90 ° drehen, z.

$(window).bind('orientationchange resize', function(event){
  if (event.orientation) {
    if (event.orientation == 'landscape') {
      if (window.rotation == 90) {
        rotate(this, -90);
      } else {
        rotate(this, 90);
      }
    }
  }
});

function rotate(el, degs) {
  iedegs = degs/90;
  if (iedegs < 0) iedegs += 4;
  transform = 'rotate('+degs+'deg)';
  iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
  styles = {
    transform: transform,
    '-webkit-transform': transform,
    '-moz-transform': transform,
    '-o-transform': transform,
    filter: iefilter,
    '-ms-filter': iefilter
  };
  $(el).css(styles);
}

Hinweis: Wenn Sie in IE um einen beliebigen Winkel drehen möchten (für andere Zwecke), müssen Sie die Matrixtransformation verwenden, z.

rads = degs * Math.PI / 180;
m11 = m22 = Math.cos(rads);
m21 = Math.sin(rads);
m12 = -m21;
iefilter = "progid:DXImageTransform.Microsoft.Matrix("
  + "M11 = " + m11 + ", "
  + "M12 = " + m12 + ", "
  + "M21 = " + m21 + ", "
  + "M22 = " + m22 + ", sizingMethod = 'auto expand')";
styles['filter'] = styles['-ms-filter'] = iefilter;

- oder verwenden Sie CSS-Schleifpapier . Außerdem wird der Rotationsstil auf das Fensterobjekt angewendet, das ich noch nie getestet habe und nicht weiß, ob es funktioniert oder nicht. Möglicherweise müssen Sie den Stil stattdessen auf ein Dokumentelement anwenden.

Trotzdem würde ich immer noch empfehlen, einfach eine Meldung anzuzeigen, in der der Benutzer aufgefordert wird, das Spiel im Hochformat zu spielen.

19
Lèse majesté

scheint seltsam, dass niemand die Lösung für die CSS-Medienabfrage vorgeschlagen hat:

@media screen and (orientation: portrait) {
  ...
}

und die Option, ein bestimmtes Stylesheet zu verwenden:

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

MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation

12

Einfacher Javascript-Code für die Anzeige des mobilen Browsers im Hoch- oder Querformat.

(Auch wenn Sie den HTML-Code zweimal in die beiden DIVs eingeben müssen (einen für jeden Modus), wird dies wohl schneller geladen als mit JavaScript, um das Stylesheet zu ändern ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mobile Device</title>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    if(window.orientation==0)
    {
      document.getElementById('portrait').style.display = '';
      document.getElementById('landscape').style.display = 'none';
    }
    else if(window.orientation==90)
    {
      document.getElementById('portrait').style.display = 'none';
      document.getElementById('landscape').style.display = '';
    }
}, false);
</script>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
</head>
<body>
<div id="portrait" style="width:100%;height:100%;font-size:20px;">Portrait</div>
<div id="landscape" style="width:100%;height:100%;font-size:20px;">Landscape</div>

<script type="text/javascript">
if(window.orientation==0)
{
  document.getElementById('portrait').style.display = '';
  document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
  document.getElementById('portrait').style.display = 'none';
  document.getElementById('landscape').style.display = '';
}
</script>
</body>
</html>

Getestet und funktioniert auf Android HTC Sense und Apple iPad.

6
Daz Williams

Mit den neuen CSS3-Funktionen können Sie die Seite in die entgegengesetzte Richtung drehen, in der sie gedreht wurden. Entschuldigung, keine IE7-Unterstützung. :(.

var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");
3
Qvcool

Sie können die Eigenschaften screenSize.width und screenSize.height verwenden und ermitteln, wann width> height ist, und dann mit dieser Situation umgehen, indem Sie den Benutzer darüber informieren oder den Bildschirm entsprechend anpassen.

Aber die beste Lösung ist, was @ Doozer1979 sagt ... Warum würden Sie das, was der Benutzer bevorzugt, außer Kraft setzen?

0
NinjaCat
0
Browsera