web-dev-qa-db-ja.com

全画面API HTML5およびSafari（iOS 6）

IOS 6のSafariでアプリケーションを全画面モード（トップバーなし）で実行しようとしています。コードは次のとおりです。

var elem = document.getElementById("element_id");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

デスクトップブラウザでうまく動作します。ただし、Mobile Safari（iOS）6では機能しません。

この問題について何か考えはありますか？

htmlapimobile-safariios6fullscreen
14
R.C.

サポートされていません...

http://caniuse.com/fullscreen

20
ndm

この質問が寄せられてから6年後、「webkit」という接頭辞付きのフルスクリーンAPIは、iPadではiOS 12.1のモバイルSafariで機能するようになりましたが、iPhoneでは機能しません。 CanIUse ではまだ報告されていないようで、Appleこれまでに見つかった唯一の情報は、iOS 12に関するラインアイテムです 「Safariの新機能」ページ および リリースノート および Tweet ：

昨日、iPhoneとiPadをiOS 11.xからiOS 12.1にアップデートしました。 iPadのSafariではフルスクリーンAPIが機能しますが、iPhoneは機能しません。 iPadでは、「alert（document.fullscreenEnabled）」は「undefined」を表示しますが、「alert（document.webkitFullscreenEnabled）」は「true」を表示します。 iPhoneでは、どちらも「未定義」と表示されます。

次のスクリプトを実行すると、iPadのSafariで全画面モードで表示できます。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #target {
            width: 150px; height: 100px; padding: 50px 0 0 0;
            margin: 50px auto; text-align: center;
            background-color: tan;
        }
    </style>
</head>
<body>
    <div id="target">Click or touch me</div>
    <script>
        (function(w) {
            "use strict";
            var d = w.document;
            var t = d.getElementById("target");

            t.addEventListener("click", function() {
                d.documentElement.webkitRequestFullscreen();
                // Compare alternative to preceding line, calling
                // method on target element instead:
                // t.webkitRequestFullscreen();
                // And compare changing target's style on change:
                // t.style.width = "100%";
                // t.style.height = "100%";
            });

            // alerts "undefined" in iOS 12.1 Safari on iPad and iPhone
            alert(d.fullscreenEnabled);
            // alerts "true" in iOS 12.1 Safari on iPad, "undefined" on iPhone
            alert(d.webkitFullscreenEnabled);
        }(window));
    </script>
</body>
</html>

全画面表示すると、iPadのSafariは左上隅に「X」UI要素を挿入して、全画面を終了するためにタッチします。

デモページ を使用した2014年のフルスクリーンAPIの再生 サイトポイントのチュートリアル は、私のiPadでもうまく機能しました。注意してください。SitePointチュートリアルの2012バージョンの古い 古いデモページ で遊んでいると、SafariでiPadが2回フリーズし、エスケープするにはiPadを再起動する必要がありました。

screenfull.jsライブラリ の デモページ で遊ぶことは、私のiPadでもうまく機能しました。

6
Slack Undertow

全画面表示はできません。メタタグを正しく設定し、Webアプリをホーム画面に配置すると、すべてのSafariの残骸を取り除くことができますが、iOSステータスバー（接続、時計、バッテリー）が残ります。

<meta name="Apple-mobile-web-app-capable"
  content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style"
  content="black-translucent" />

これには多くのリソースがあります。これが私が使用してきたものです。

http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Apple自身のドキュメントも良いです：

http://developer.Apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

ただし、要するに、iOS 6.1以降、iOSデバイスにフルスクリーンのWebアプリをデプロイすることはできません。ステータスバーは常に表示されます。

6
Adam Davis

https://developer.Apple.com/reference/webkitjs/htmlvideoelement

if (elem.webkitEnterFullScreen) {
  elem.webkitEnterFullScreen();
}

わたしにはできる。

3
May Peng

以下は、iOSのステータスバーを邪魔にならないようにスクロールします。 $（document）.readyの早い段階で呼び出します

$('body').scrollTop(1);

現時点では、これはバージョン6.xまで機能しますが、iOS7のブラウザーのベータ版では機能しないようです。いつものように、下部にあるブラウザのツールバーは固定されています。

1
Victor

有効にすると、iPhone（iOS 12.1.4）で機能します。

設定-> Safari->詳細設定->実験的機能->フルスクリーンAPI

0
Tom Andraszek

フルスクリーンモードをエミュレートする本当に素晴らしいハックがあり、ユーザーは好きなようにそこに出入りできます。なぜそれが機能するのか、それが他のプラットフォームでまったく機能するのかどうかはまったくわかりませんが、私のiPhone Safariでは予想通りに見えます。

それにもかかわらず、このソリューションにはいくつかの制限があります。画面が提供できるよりも多くのスペースを使用しないWebアプリにのみ使用でき、ユーザーはページが読み込まれた後に横向きモードに変更する必要があります。

HTMLと本文に100％の高さと幅を与える

html, body {
  /* Avoid ugly scrollbars */
  overflow: hidden;
  /* Reset default browser paddings etc */
  margin: 0;
  padding: 0;
  border: 0;
  /* 100% size */
  width: 100%;
  height: 100%;
}

ここでハック部分です。上部に1pxのマージンを与える

body {
  margin-top: 1px;
}

あなたがしなければならない最後のことは、マージンがそれに影響を及ぼさないように位置を固定した追加のdivにあなたのすべてのWebアプリのコンテンツを置くことです

.wrapper {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

Etvoilà。デバイスを回転させて、これらの醜いナビゲーションバーが消えることを確認します。実際のフルスクリーンゲームに最適です。

誰もがフルスクリーンのゲームを作りたいわけではありませんが、これはどういうわけかポリフィルとして使用できます。

誰かのお役に立てれば幸いです。

ダースムーン

0
Darth Moon

@ Tom-Andraszekは部分的に正しいです。 Appleは最近（2019年初頭の時点で）iOSからiPadOSを分離しており、昨年の秋（2018）の後半にiPad SafariでのみフルスクリーンAPIをサポートするようになりました。 Webアプリに完全なクロスブラウザー機能を実装する方法、特にiPadOS 12.x Safariをカバーする方法：

iPad Safariで全画面表示になります。

開示：前述のリンクで共有されたブログ投稿を書きました。 ChromeはまだフルスクリーンAPIをサポートしておらず、iPhoneのiOSはほとんど問題外です。

0
Marvin Danig