Everyone through the phone with a browser to open Baidu, Taobao, after loading the homepage, will automatically hide the address bar above the page, coupled with these sites for mobile browsers to do optimization, at first glance, it is really difficult to distinguish between this is the Web app or native app, The picture on the left below is for Safari to open Taobao's home page, but for the bottom browser toolbar, it's like native App. In fact, it has an address, drag down to see the address bar, below the right picture.
How do you hide the browser's address bar? Baidu, there are a lot of information, very simple, mainly using the Window.scrollto () method, the current page on the screen scroll up, resulting in the address bar beyond the scope of vision, as follows:
Copy Code code as follows:
<script>
Window.onload=function () {
settimeout (function () {
Window.scrollto (0, 1)
}, 0);
};
</script>
But if you make a simple page, such as just one sentence, plus a script, you'll be sad to discover,
The address bar is not automatically hiddenDoes the Window.scrollto () method not take effect in this browser?
But if you have more content on the Web page than the screen height, it will automatically hide the address bar;
How do I solve the same hidden address bar when the content is less? Before scrolling, the program dynamically sets the height of the body, adding the following code:
Copy Code code as follows:
if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
Bodytag = document.getElementsByTagName (' body ') [0];
BodyTag.style.height = document.documentelement.clientwidth/screen.width * screen.height + ' px ';
}
The following is an example of a page (the default is to hide the address bar) and a screenshot of the address bar when the right image is Drop-down:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset=utf-8/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1," >
<title> I am a Web page, but do not show scroll bars </title>
<script>
Window.onload=function () {
if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
Bodytag = document.getElementsByTagName (' body ') [0];
BodyTag.style.height = document.documentelement.clientwidth/screen.width * screen.height + ' px ';
}
settimeout (function () {
Window.scrollto (0, 1)
}, 0);
};
</script>
<style>
/* Input Box fillet display * *
Input {
Background: #fff; border:1px solid #080;
padding:5px;
-webkit-border-radius:5px;
}
/* button
---------------------------------------------- */
. button {
Display:inline-block;
Zoom:1; /* Zoom and *display = IE7 hack for Display:inline-block * *
*display:inline;
Vertical-align:baseline;
margin:0 2px;
Outline:none;
Cursor:pointer;
Text-align:center;
Text-decoration:none;
font:14px/100% Arial, Helvetica, Sans-serif;
padding: 5em 2em. 55em;
text-shadow:0 1px 1px rgba (0,0,0,.3);
-webkit-border-radius:. 5em;
-webkit-box-shadow:0 1px 2px Rgba (0,0,0,.2);
}
* Green *
. Green {
Color: #e8f0de;
Border:solid 1px #538312;
Background: #64991e;
Background:-webkit-gradient (linear, left top, left bottom, from (#7db72f), to (#4e7d0e));
}
</style>
<body style= "background: #ededed;" >
<div style= "padding-top:40%;p adding-left:20%" >
Account Number: <input type= "Text" ><br/>
Password: <input type= "Text" ><br/>
<div>
<div style= "padding-top:5%;p adding-left:23%" ><input type= "button" class= "button green" value= "Login" ></ Div>
</body>
