Menu
When I use the full screen mode of Safari on an iOS device, my website's header is under the status bar. I am using jQuery Mobile but I also had the same issue using Twitter Boostrap. Here is my code:
<!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>
I also took a screenshot of the problem. As you can see, my title bar is under the iPad's status bar. I have tried changing the apple-mobile-web-app-status-bar-style to different things but it's not affecting the status bar. The strange thing is, apple-mobile-web-app-status-bar-style, makes no difference no matter what I change it to.
668
This is strange as your code looks correct. I have two suggestions:
Try reversing web-app-capable and status-bar-style meta tags? Not that it should make any difference but all of my full screen web apps have them in the reverse order to you (ie: status-bar-style first).
Try removing the home screen app and re-adding it after making the change? I've found all the meta tags for web-app specific elements (eg: status bar, icon, startup image etc) don't update properly all the time unless I do that.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
