web-dev-qa-db-ja.com

モバイルWebページでのデバイスのローテーションのブロック

ユーザーがポートレートモードでモバイルデバイスを使用してアクセスすると、たとえばJavascriptを使用してページで検出し、ユーザーが携帯電話を横向きに回転すると方向の変更を停止できますか？私のページにはゲームがあり、ポートレート表示専用に最適化されており、ランドスケープでは使いたくありません。

javascriptmobilemobile-phonesmobile-website
33
qqryq

新しいAPIが開発中です（そして現在利用可能です）！

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

そして

screen.lockOrientation("orientation");

「向き」は次のいずれかになります。

portrait-primary-プライマリポートレートモードのときの画面の向きを表します。デバイスが通常の位置にあり、その位置が縦長の場合、またはデバイスの通常の位置が横長で、デバイスが時計回りに90度回転した場合、画面はプライマリポートレートモードと見なされます。通常の位置はデバイスに依存します。

portrait-secondary-セカンダリポートレートモードのときの画面の向きを表します。デバイスが通常の位置から180°に保持され、その位置がポートレートである場合、またはデバイスの通常の位置が横長で、保持されているデバイスが反時計回りに90°回転する場合、スクリーンはセカンダリポートレートモードと見なされます。通常の位置はデバイスに依存します。

landscape-primary-プライマリ横長モードのときの画面の向きを表します。デバイスが通常の位置に保持され、その位置が横長の場合、またはデバイスの通常の位置が縦長で、保持されているデバイスが時計回りに90°回転している場合、画面はプライマリ横長モードと見なされます。通常の位置はデバイスに依存します。

landscape-secondary-セカンダリランドスケープモードのときの画面の向きを表します。保持されているデバイスが通常の位置から180°であり、その位置が横長の場合、またはデバイスの通常の位置が縦長で、保持されているデバイスが反時計回りに90°回転している場合、画面はセカンダリランドスケープモードと見なされます。通常の位置はデバイスに依存します。

portrait-これは、portrait-primaryとportrait-secondaryの両方を表します。

landscape-ランドスケーププライマリとランドスケープセカンダリの両方を表します。

default-デバイスの自然な向きに依存するポートレート-プライマリまたはランドスケープ-プライマリを表しますたとえば、パネルの解像度が1280 * 800の場合、デフォルトでは横向きになり、解像度が800 * 1280の場合、デフォルトでは縦向きになります。

Mozillaは、画面にlockOrientationUniversalを追加して、ブラウザ間の互換性を高めることをお勧めします。

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

詳細についてはこちらをご覧ください： https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

25
DemiImp

JavaScript対応のブラウザでは、画面が横向きモードか縦向きモードかを簡単に判別できるはずです CSSを使用して補正 。これを無効にするか、少なくともデバイスの回転が正しく機能しないことを警告するオプションをユーザーに提供すると役立つ場合があります。

編集

ブラウザの向きを検出する最も簡単な方法は、ブラウザの幅とブラウザの高さを確認することです。これには、（PSPのような一部のモバイルデバイスがそうであるように）ランドスケープモードに自然に向けられたデバイスでゲームがプレイされているかどうかがわかるという利点もあります。これは、デバイスの回転を無効にするよりも理にかなっています。

編集2

Dazはデバイスの向きを検出する方法を示しましたが、向きの検出は解決策の半分にすぎません。自動方向変更を元に戻したい場合は、すべてを90°または270°/ -90°のいずれかで回転させる必要があります。

$(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);
}

注：IEで任意の角度で（他の目的で））回転させたい場合は、マトリックス変換を使用する必要があります。

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;

—または CSS Sandpaper を使用します。また、これはウィンドウオブジェクトに回転スタイルを適用しますが、実際にテストしたことはなく、動作するかどうかはわかりません。代わりに、ドキュメント要素にスタイルを適用する必要がある場合があります。

とにかく、ポートレートモードでゲームをプレイするようユーザーに求めるメッセージを表示することをお勧めします。

19
Lèse majesté

cSSメディアクエリソリューションを誰も提案していないのは奇妙に思えます。

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

特定のスタイルシートを使用するオプション：

<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

13
Facundo Colombier

モバイルブラウザを縦向きまたは横向きで表示するためのシンプルなJavaScriptコード。

（2つのDIV（各モードに1つずつ）にhtmlコードを2回入力する必要がありますが、おそらくこれはJavaScriptを使用してスタイルシートを変更するよりも高速にロードされます...

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

Android HTC SenseおよびApple iPad。

6
Daz Williams

新しいCSS3機能を使用すると、ページを回転した方向とは逆の方向に回転できます。申し訳ありませんが、IE7のサポートはありません。 :(。

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

ScreenSize.widthおよびscreenSize.heightプロパティを使用して、width> heightを検出し、ユーザーに通知するか、それに応じて画面を調整することにより、その状況を処理できます。

しかし、最良の解決策は@ Doozer1979の言うことです...ユーザーが好むものをオーバーライドするのはなぜですか？

0
NinjaCat

向きの変化を検出できますが、それを防ぐことはできないと思います。

0
Browsera