Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - How to hide Safari Mobile browser bottom button bar in iPhone?

Following is head section:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    <link rel="apple-touch-startup-image" href="/startup.png">

    <script src="http://www.google.com/jsapi"></script>

    <script>
      window.top.scrollTo(0, 1);
      alert('ok');
      google.load("jquery", "1.4.1");
      google.load("jqueryui", "1.8.0");
    </script>

</head>

using iOS 4.2.1

Above is not working for me. Browser Address bar and bottom toolbar are still there. I have tried some tutorials but I am unable to change anything. Any idea?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

For iOS 7.1, you can set this in your header to minimize the UI:

<meta name="viewport" content="width=device-width, minimal-ui">

It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...