iOSデバイスのフルスクリーンHTMLがステータスバーの下に表示される

iOSデバイスでSafariのフルスクリーンモードを使用すると、ウェブサイトのヘッダーがステータスバーの下に表示されます。私はjQuery Mobileを使っていますが、私もTwitter Boostrapを使って同じ問題を抱えていました。ここに私のコードです：iOSデバイスのフルスクリーンHTMLがステータスバーの下に表示される

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script> 

</head> 
<body>

私はまた、問題のスクリーンショットを撮りました。ご覧のとおり、私のタイトルバーはiPadのステータスバーの下にあります。 apple-mobile-web-app-status-bar-styleを別のものに変更しようとしましたが、ステータスバーには影響しません。奇妙なことに、apple-mobile-web-app-status-bar-styleは、私が何を変更しても何の違いもありません。

enter image description here

出典

2013-05-17 Keith

コードが正しく見えるように、これは奇妙です。

がweb-app-capableとstatus-bar-styleメタタグを逆にしてみてください：私は2件の提案がありますか？違いはありませんが、私のフルスクリーンのWebアプリはすべて逆の順序で表示されます（つまり、最初にstatus-bar-style）。
変更後にホームスクリーンアプリを削除して再追加してみますか？私はそれをしない限り、Webアプリケーション固有の要素（ステータスバー、アイコン、起動イメージなど）のメタタグが常に正しく更新されないことを発見しました。

出典

2013-05-23 01:31:36 adnrw

私は昨日それを実際に理解しましたが、私はそれを更新することはありませんでした。それを元に戻すことができました。私は元々apple-mobile-web-app-status-bar-styleをデフォルトに設定していました。私はそれを黒に変更しましたが、再追加しませんでした。私はそれを再追加した後、それは働いた。 – Keith

iOSデバイスのフルスクリーンHTMLがステータスバーの下に表示される

答えて

関連する問題