mozilla
Your Search Results

    Managing screen orientation

    これは実験段階の機能です。
    この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

    概要

    スクリーンの向きは、デバイスの向きと異なる場合があります。デバイスが自身の向きを検知することができない場合でも、スクリーンには向きがあります。またデバイスが自身の向きを知ることが可能であっても、Web アプリケーションのインターフェイスを維持または適合するためにスクリーンの向きを制御できるとよいでしょう。

    CSS と JavaScript の双方に、スクリーンの向きを扱う方法がいくつかあります。第一の方法は orientation メディアクエリです。これはブラウザウィンドウがランドスケープモード (すなわち幅が高さより大きい) かポートレートモード (高さが幅より大きい) かに基づいて、CSS を使用してコンテンツのレイアウトを調整できます。

    第二の方法は、スクリーン自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen orientation API です。

    向きに基づいたレイアウトの調整

    向きの変化についてのもっとも一般的なケースのひとつが、デバイスの向きに基づいてコンテンツのレイアウトを変更したいときです。例えば、デバイスのディスプレイで最長の寸法に沿ってボタンバーを引き伸ばしたいでしょう。メディアクエリを使用して、簡単かつ自動的にこれを行うことができます。

    以下の HTML コードによる例を見てみましょう。

    <ul id="toolbar">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
    

    スクリーンの向きに応じて固有のスタイルを扱うために、CSS で orientation メディアクエリに頼ります。

    /* 始めに、共通のスタイルを定義しましょう */
    
    html, body {
      width : 100%;
      height: 100%;
    }
    
    body {
      border: 1px solid black;
    
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    p {
      font   : 1em sans-serif;
      margin : 0;
      padding: .5em;
    }
    
    ul {
      list-style: none;
    
      font   : 1em monospace;
      margin : 0;
      padding: .5em;
    
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    
      background: black;
    }
    
    li {
      display: inline-block;
      margin : 0;
      padding: 0.5em;
      background: white;
    }
    

    共通のスタイルを定義したら、続いて向きに対して特有のケースの定義を始めましょう。

    /* ポートレートでは、ツールバーを上に置くことを望みます */
    
    @media screen and (orientation: portrait) {
      #toolbar {
        width: 100%;
      }
    }
    
    /* ランドスケープでは、ツールバーを左に置くことを望みます */
    
    @media screen and (orientation: landscape) {
      #toolbar {
        position: fixed;
        width: 2.65em;
        height: 100%;
      }
    
      p {
        margin-left: 2em;
      }
    
      li + li {
        margin-top: .5em;
      }
    }
    

    結果は以下のとおりです。

    ポートレート ランドスケープ

    注記: orientation メディアクエリは、実際はデバイスの向きではなくブラウザウィンドウ (または iframe) の向きに応じて適用されます。

    スクリーンの向きの固定

    警告: この API は実験的であり現在は moz 接頭辞付きで、Firefox OS および Android 版 Firefox で使用できます。

    一部のデバイス (主にモバイルデバイス) は、スクリーンに表示している内容をいつでも読めるようにするため、デバイスの向きに基づいてスクリーンの向きを動的に変更できます。この動作はテキストコンテンツにはとても適していますが、そのような変化を好まないコンテンツも存在します。例えばデバイスの向きに基づくゲームでは、そのような向きの変化によって混乱してしまうでしょう。

    Screen Orientation API は、まさにそのような変化を抑制したり制御したりするものです。

    向きの変化のリッスン

    orientationchange イベントは、デバイスがスクリーンの向きを変更する度に発生します。また、向きそのものを screen.orientation プロパティで読み取ることが可能です。

    screen.addEventListener("orientationchange", function () {
      console.log("The orientation of the screen is: " + screen.orientation);
    });
    

    向きの変更の抑制

    任意の Web アプリケーションが、自身の要望に合うようにスクリーンを固定できます。screen.lockOrientation() メソッドを使用してスクリーンの固定を、また screen.unlockOrientation() メソッドで固定の解除を行います。

    screen.lockOrientation() は、適用する固定方式を定義する文字列 (または一連の文字列) を受け入れます。受け入れる値: portrait-primaryportrait-secondarylandscape-primarylandscape-secondaryportraitlandscape (それぞれの値について知るために lockOrientation をご覧ください)。

    screen.lockOrientation('landscape');

    注記: スクリーンの固定は Web アプリケーションに従属します。アプリケーション A が landscape に固定、またアプリケーション B が portrait に固定した場合は、アプリケーション A から B に、または B から A に切り替えても orientationchange イベントは発生しません。これは、双方のアプリケーションが自身の向きを維持しているためです。

    ただし、固定の要求を満たすために向きを変更しなければならない場合は、向きの固定で orientationchange イベントが発生してもかまいません。

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: yyss
    最終更新者: yyss,