メタタグを設定する場合
Apple-mobile-web-app-capable
そして
Apple-mobile-web-app-status-bar-style
フルスクリーンWebアプリを作成するために、iOSステータスバーは画面の上部(半透明)にあり、下部には追加の空の黒いバーがあります。
私のコードは次のとおりです。
<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="Apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="Apple-touch-fullscreen" content="yes">
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
</head>
<body><h1>Test</h1>
<p>Capture a photo using camera</p>
<input type="file" capture="camera" accept="image/*">
</body></html>
タグApple-mobile-web-app-status-bar-style
には追加の問題があります。カメラ入力を介して写真を撮影して承認すると、画面の両側に黒いバーが表示されます。 iPad3ではiOS8 GMを使用しています。
これはiOS 8のバグかもしれないと思うが、Appleは私のバグレポートを気にしていないようだ:(
誰もがこの問題の解決策/回避策を知っていますか?
更新1: Appleは、バグレポートを9月19日に複製(クローズ)としてマークしました。
更新2:バグはiOS 8.3 Beta 1で修正されました
AppleはiOS 8.3ベータ1でこのバグを修正しました
技術的にはこれはあなたの質問に対する答えではありませんが、私はこの問題を自分で解決しようとしている間に発見したことを文書化してきました。私はそれをそれ自身の質問として投稿するつもりでしたが、それは重複として閉じられると考えました。
固定Webアプリケーションを実行しているiOS8デバイス。タグについて:
<meta name="Apple-mobile-web-app-status-bar-style" content="black">
から Apple開発者リファレンス :
コンテンツがデフォルトに設定されている場合、ステータスバーは正常に表示されます。黒に設定すると、ステータスバーの背景が黒になります。黒半透明に設定すると、ステータスバーは黒で半透明になります。デフォルトまたは黒に設定されている場合、Webコンテンツはステータスバーの下に表示されます。黒半透明に設定すると、Webコンテンツは画面全体に表示され、ステータスバーによって部分的に見えなくなります。デフォルト値はデフォルトです。
この機能を有効にするには、使用する必要があります
<meta name="Apple-mobile-web-app-capable" content="yes">
IOS6および7では、これは期待どおりに機能します。
iOS8では、これは完全に壊れているように見えます。たとえば、iPad Airを縦向きで実行しているiOS 8.0.2の動作は次のとおりです。
black
は透明な背景になります。画面の下部に黒一色のバーがありますdefault
または値を設定しないと、背景が透明になり、画面の下部に白いwhiteバーが表示されますblack-translucent
は背景を透明にしますが、画面の下部に迷惑なバーはありませんいずれの場合も、コンテンツはバーの「下」に表示されます。つまり、バーはコンテンツを押し下げません。
IPhone6では、ステータスバーは横向きではまったく表示されません。ただし、ポートレートでは、次の動作:
black
は期待どおりに機能し、コンテンツはプッシュダウンされます(すごい!!!)default
の上部に空の白いバーがありますblack-translucent
は、背景が透明になり、コンテンツが下になりますIPhone6 +でテストする機会がありませんでした
XcodeのiOSシミュレーターは、実際のデバイスで発生する動作を確実に再現するようには見えません。
JavaScriptを使用して動的に変更しようとしましたが、効果がないようです。
これをさらに面白く/イライラさせるために、html要素にスタイルを設定してステータスバー(clock/wifiなど)をカバーできます。例えば.
html {background: black;}
body {background: #DDD; margin-top: 20px}
他の場所で文書化された同じ問題:
この問題はiOS6以降に存在していました。私は以前にあなたが今日提供しているすべての詳細とともにAppleのバグレポートに投稿しましたが、後で重複としてマークされました。これは2年前のことでしたが、残念ながら今日はそれがさらに悪化することを発見しました。
元のバグレポートのIDは11966202であり、まだ(オープン)です。あなたは同じ問題を抱えているので、あなたができる唯一のことは、それをエスカレートするバグを確認することであり、彼らは将来それを修正します。
私が言ったように、回避策がないことを伝えるのに十分なソリューションを探しています。この問題はすべてのiOSデバイスで再現できますが、画面のサイズと向きに基づいて動作が異なります。
IOS 8では、ビューポートが画面のごく一部になり、完全に閉じたりクラッシュしたりする不具合が発生しました。
編集:Appleチケットは現在クローズしています
月曜日の時点で、Appleはチケットをクローズしており、8.1を使用することで、カメラとステータスバーの問題が最終的に解決されることを確認できます。
問題は<meta name="Apple-mobile-web-app-status-bar-style" content="black">
アプリの下部にある黒いバーを取り除くには、次を使用する必要があります:<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent">
半透明を使用すると、iOS7とiOS8の両方でアプリが同じように見えます。 iOSステータスバーのアイコンをクリアするには、アプリ上部のコンテンツを調整する必要があります。
上記のすべてを拡張するための私の解決策は次のとおりです。
<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent" />
次に、20ピクセルずつシフトダウンする必要があるすべての要素、特にposition: fixed; top: 0px;
通常のブラウザ[デスクトップ/モバイル]ビューのCSSに存在します。
次のスクリプトを使用して、CSSリンクの下のheadセクションにカスタムCSSを追加します[私の作業例]
<script type="text/javascript">
if (window.navigator.standalone) {
document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"assets/css/style-body-ios8.css\" charset=\"utf-8\" \/>");
}
</script>
私の結果は、デスクトップ/モバイルブラウザのウェブサイトビューは通常通りで、その後、ウェブサイトはウェブアプリとしてホーム画面に追加され、起動時にフルスクリーンが開き、ステータスバーがios8以前のように見えます[fyi、私はステータスバーの固定ヘッダーcssが黒の背景として表示される
IOS 8.0.2を実行しているiPad/iPhone/iPodでテスト済み-すべて良好です。参考までに、古いiPod ios 6.1.6でテストしました。20pxの余分なシフトダウンが予想されていましたが、ありませんでした-ボーナス!
IPadでポートレートでWebアプリを開く限り、ステータスバーのスタイルを「黒」に設定しても期待どおりに機能することは注目に値します。その後、iPadを回転させても、黒いバーが正しく表示されます。
問題は、少なくとも私にとっては、横向きでWebアプリを起動するときだけです。私はiPad 3をIOS 8.1で使用していますが、8.3でも同じだと思います
アプリの上部に20ピクセルの高さのdivを追加して、そのステータスバーとして機能させるだけです
Apple-mobile-web-app-status-bar-styleはiOS 8では非アクティブです。固定divを上部に追加する場合は、OS 8_0にのみ追加します
if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...