Iphone – Can Not Hiding Safari User Interface Components

iphoneiphone-standalone-web-app

I am very new for iPhone web developer.
I started with reading Safari Web Content Guide.
Then I found that we can hide user interface for example address bar of safari.
Therefore, I followed the instructor. The result is not what I expected.
The address bar still show.

I put this meta tag in html file.

and this this my code

<head>     
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Hello iPhone Web App</title>
    <style type="text/css">
          form{
           width:100%;
         }

         #searchBox{
          font-size:25px;
        width:50%;
         }
         #send{
          font-size:25px;
         }

         #containerTop{
           text-align:center;
           width:100%;
        }

    </style>
</head>
<body>
    <form method="get">
        <div id="containerTop">
            <input type="text" id="searchBox" name="search" autocapitalize="off" size="15" maxlength="128" />
            <input type="submit" id="send" value="ค้นหา" />
        </div>         
    </form>
</body>

I am looking forward to your reply, thanks

Best Answer

"apple-mobile-web-app-capable" only works it's magic when you launch your WebApp after having saved a link to the Home Screen, and launch your WebApp from the new icon.

For regular web pages you need to scroll the Address Bar out of view using:

<script type="text/javascript">
window.addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0,0); }, 100); }, true);
</script>

The Navigation Bar at the bottom of the screen is permanent for regular web pages, but is removable for WebApps (saved to Home Screen) using the "apple-mobile-web-app-capable" meta tag.

Related Topic