「風景」オリエンテーションモードを強制する


91

アプリケーションが「ポートレート」モード用に設計されていないため、アプリケーションに「ランドスケープ」モードを強制しようとしています。どうやってやるの?

回答:


93

HTML5ウェブアプリマニフェストで可能になりました。下記参照。


元の答え:

WebサイトまたはWebアプリケーションを特定の方向にロックすることはできません。これは、デバイスの自然な動作に反します。

次のようなCSS3メディアクエリを使用して、デバイスの向きを検出できます

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

または、次のようにJavaScriptの向き変更イベントをバインドします。

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

2014年11月12日の更新:HTML5webappマニフェストで可能になりました。

html5rocks.comで説明されているように、manifest.jsonファイルを使用して方向モードを強制できるようになりました。

これらの行をjsonファイルに含める必要があります。

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

そして、次のようにマニフェストをhtmlファイルに含める必要があります。

<link rel="manifest" href="manifest.json">

ロック方向モードのWebアプリマニフェストでサポートされているものが正確にはわかりませんが、Chromeは間違いなく存在します。情報が入り次第更新します。


1
はい、webappsもそうです。WebサイトをiPhoneまたはiPadのホーム画面に「保存」しても、Webアプリの向きが変わります。
レミブルトン2013

2
caniuse.comによると、マニフェストはAndroid4.1以降で使用できます。参照してくださいcaniuse.com/#feat=offline-apps
レミブルトン

1
マニフェストが呼び出されているかどうかはどうすればわかりますか?マニフェストがリンクされているindex.htmlと同じ場所にあるにもかかわらず、それは私にとっては機能せず、開発ツールのネットワークに何もロードされていないことが示されています。
イアンS

3
Chromeでは、検査モードの[アプリケーション]タブを確認できるようになりました。jsonファイルへの直接リンクとその情報が記載された[マニフェスト]ページがあります。
drskullster 2017年

1
@RémiBreton-まだその情報を探しているので、更新しますか?私たちは何年も
ashleedawg

46
screen.orientation.lock('landscape');

強制的にランドスケープモードに変更し、そのままにします。Nexus5でテスト済み。

http://www.w3.org/TR/screen-orientation/#examples


3
デフォルトのインターネットブラウザ(Chromeではない)を使用しているAndroidでは動作しません-アイデアはありますか?
AntoniosTsimourtos18年

6
Safari(iOSおよびmacOS)には実装されていません:caniuse.com/#feat=screen-orientation
MBach

3
簡単に言うと、これはフルスクリーンモードに入った後にのみ機能します。
Thane Brimhall 2018

2
この方法はMozillaでは推奨されていません:developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientationまた、ブラウザの互換性が非常に低いです。
FernandoGarcia19年

1
これは、Chromeのフルスクリーンモードでも機能しません:|
Shamshirsaz.Navid

22

私はこのようないくつかのCSSを使用します(CSSのトリックに基づいています):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

3
私はこの答えを使用..私がしなければならないすべてはからメディアクエリを変更することであるlandscapeportraitし、期待どおりに動作します@media screen and (orientation: portrait)
ymz

将来の人々を助けるために答えを編集しました。現在のモードがportrait(に切り替わるようにlandscape)のときに回転を適用する必要があります。
lfarroco

ありがとう。私はこのようなものを探していました。
アンダードッグ

page-id-xxxを介して単一のページにのみ適用するにはどうすればよいですか?
ホーマー

0

私は同じ問題を抱えていました、それは不足しているmanifest.jsonファイルでした、見つからない場合、ファイルを指定しないか間違ったパスを使用する場合、ブラウザは向きで決定するのが最適です。

htmlヘッダーでmanifest.jsonを正しく呼び出すだけで修正しました。

私のhtmlヘッダー:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

そしてmanifest.jsonファイルの内容:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

ファビコンとアイコンを生成するには、次のWebツールを使用します:https://realfavicongenerator.net/

マニフェストファイルを生成するには、https//tomitm.github.io/appmanifest/を使用します

私のPWAはうまく機能します、それが役立つことを願っています!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.