17

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 では動作しません。

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

4

8 に答える 8

25

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

http://caniuse.com/fullscreen

于 2012-10-10T15:36:55.990 に答える
8

この質問が出されてから 6 年が経ちましたが、「webkit」という接頭辞が付いたフルスクリーン API は、iPad の iOS 12.1 のモバイル Safari では動作するようになりましたが、iPhone では動作しないようです。CanIUseではまだ報告されていないようで、私がこれまでに見つけた唯一の Apple 情報は、"What's New in Safari" ページのiOS 12 に関する項目と、リリース ノートとツイート:

昨日、iPhone と iPad を iOS 11.x から iOS 12.1 にアップデートしました。フルスクリーン API は、iPad の Safari では機能しますが、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 要素を挿入し、全画面を終了するためにタッチします。

Site Point で2014 年の全画面 APIチュートリアルのデモ ページを試してみると、私の iPad でもうまくいきました。Site Point チュートリアルの 2012 年版の古い古いデモ ページで遊んでいると、Safari で iPad が 2 回フリーズし、iPad を再起動して脱出する必要があったことに注意してください。

screenfull.js ライブラリのデモ ページをいじると、私の iPad でもうまくいきました。

于 2018-11-04T22:08:42.880 に答える
7

フルスクリーンは使えません。メタ タグを正しく設定し、Web アプリをホーム画面に配置すれば、サファリ クラフトをすべて取り除くことができますが、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 アプリを展開することはできません。ステータス バーは常に表示されます。

于 2013-05-10T15:37:12.390 に答える
0

フルスクリーン モードをエミュレートするための非常に優れたハックがあり、ユーザーは好きなように入力または終了できます。なぜそれが機能しているのか、または他のプラットフォームで機能しているのかどうかはまったくわかりませんが、iPhone Safariでは期待どおりに見えます.

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

html と body の高さと幅を 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;
}

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

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

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

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

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

ダース・ムーン

于 2019-03-03T21:44:23.410 に答える