web-dev-qa-db-ja.com

iOS 8：Webアプリのステータスバーの位置とサイズ変更の問題

メタタグを設定する場合

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で修正されました

htmliosmobileios8
39
aLiEnHeAd

AppleはiOS 8.3ベータ1でこのバグを修正しました

3
aLiEnHeAd

技術的にはこれはあなたの質問に対する答えではありませんが、私はこの問題を自分で解決しようとしている間に発見したことを文書化してきました。私はそれをそれ自身の質問として投稿するつもりでしたが、それは重複として閉じられると考えました。

固定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}

他の場所で文書化された同じ問題：

35
captainclam

この問題はiOS6以降に存在していました。私は以前にあなたが今日提供しているすべての詳細とともにAppleのバグレポートに投稿しましたが、後で重複としてマークされました。これは2年前のことでしたが、残念ながら今日はそれがさらに悪化することを発見しました。

元のバグレポートのIDは11966202であり、まだ（オープン）です。あなたは同じ問題を抱えているので、あなたができる唯一のことは、それをエスカレートするバグを確認することであり、彼らは将来それを修正します。

私が言ったように、回避策がないことを伝えるのに十分なソリューションを探しています。この問題はすべてのiOSデバイスで再現できますが、画面のサイズと向きに基づいて動作が異なります。

IOS 8では、ビューポートが画面のごく一部になり、完全に閉じたりクラッシュしたりする不具合が発生しました。

編集：Appleチケットは現在クローズしています

月曜日の時点で、Appleはチケットをクローズしており、8.1を使用することで、カメラとステータスバーの問題が最終的に解決されることを確認できます。

7
HEDWIN

問題は<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ステータスバーのアイコンをクリアするには、アプリ上部のコンテンツを調整する必要があります。

5
DrumJammer

上記のすべてを拡張するための私の解決策は次のとおりです。

<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の余分なシフトダウンが予想されていましたが、ありませんでした-ボーナス！

2
user1762289

IPadでポートレートでWebアプリを開く限り、ステータスバーのスタイルを「黒」に設定しても期待どおりに機能することは注目に値します。その後、iPadを回転させても、黒いバーが正しく表示されます。

問題は、少なくとも私にとっては、横向きでWebアプリを起動するときだけです。私はiPad 3をIOS 8.1で使用していますが、8.3でも同じだと思います

1
Sebris87

アプリの上部に20ピクセルの高さのdivを追加して、そのステータスバーとして機能させるだけです

0
Stephen O'Sullivan

Apple-mobile-web-app-status-bar-styleはiOS 8では非アクティブです。固定divを上部に追加する場合は、OS 8_0にのみ追加します

if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...
0
Dux