jQuery手机如何隐藏手机Safari的地址栏？我想我需要一个类似的解决方案，
但我不想使用jQuery手机…
但我不想使用jQuery手机…
我试过了：
http://davidwalsh.name/hide-address-bar
但是在我的情况下不行。
我身体的第一个孩子是绝对定位的div
与-webkit-overflow-scrolling：touch;
-webkit-overflow-scrolling属性似乎引起这个问题，
没有这个财产，它工作正常。
这个问题的一部分是地址栏总是保持在前台，即使我每一页滚动页面。这是由绝对定位造成的。
但是，没有绝对的定位，“-webkit-overflow-scrolling：touch;”不工作…
经过与jquery-mobile代码之间的巨大斗争，我结束了这个;)
解
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- viewport -->
<Meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<style type='text/css'>
body {
background: #E0E0E0;
margin: 0;
padding: 0;
}
.page-wrapper {
width: auto;
}
/* native overflow scrolling */
.mobile-touch-overflow {
overflow: auto;
-webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch;
-o-overflow-scrolling: touch;
-ms-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.mobile-touch-overflow,.mobile-touch-overflow * {
/* some level of transform keeps elements from blinking out of visibility on iOS */
-webkit-transform: rotateY(0);
}
.page-header {
display: block;
background: gray;
border-bottom: 1px solid #CDCDCD;
padding: 10px;
}
.page-content {
padding: 10px;
}
.page-footer {
display: block;
border-top: 1px solid #CDCDCD;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
padding-left: 0;
padding-right: 0;
text-align: center;
font-size: 12px;
color: #FFF;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
/*
* utils
*/
var utils = {
supportTouchOverflow : function(){
return !!utils.propExists( "overflowScrolling" );
},supportOrientation : function(){
return ("orientation" in window && "onorientationchange" in window);
},//simply set the active page's minimum height to screen height,depending on orientation
getScreenHeight : function(){
var orientation = utils.getorientation(),port = orientation === "portrait",winMin = port ? 480 : 320,screenHeight = port ? screen.availHeight : screen.availWidth,winHeight = Math.max( winMin,$( window ).height() ),pageMin = Math.min( screenHeight,winHeight );
return pageMin;
},// Get the current page orientation. This method is exposed publicly,should it
// be needed,as jQuery.event.special.orientationchange.orientation()
getorientation : function() {
var isPortrait = true,elem = document.documentElement,portrait_map = { "0": true,"180": true };
// prefer window orientation to the calculation based on screensize as
// the actual screen resize takes place before or after the orientation change event
// has been fired depending on implementation (eg android 2.3 is before,iphone after).
// More testing is required to determine if a more reliable method of determining the new screensize
// is possible when orientationchange is fired. (eg,use media queries + element + opacity)
if ( utils.supportOrientation() ) {
// if the window orientation registers as 0 or 180 degrees report
// portrait,otherwise landscape
isPortrait = portrait_map[ window.orientation ];
} else {
isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
}
return isPortrait ? "portrait" : "landscape";
},silentScroll : function(ypos) {
setTimeout(function() {
window.scrollTo( 0,ypos );
},20 );
},propExists : function(prop) {
var fakeBody = $( "<body>" ).prependTo( "html" ),fbCSS = fakeBody[ 0 ].style,vendors = [ "Webkit","Moz","O" ],uc_prop = prop.charat( 0 ).toupperCase() + prop.substr( 1 ),props = ( prop + " " + vendors.join( uc_prop + " " ) + uc_prop ).split( " " );
for ( var v in props ){
if ( fbCSS[ props[ v ] ] !== undefined ) {
fakeBody.remove();
return true;
}
}
},hideAdressbar : function(){
if(utils.supportTouchOverflow()){
$('.mobile-touch-overflow').height( utils.getScreenHeight() );
}
utils.silentScroll(1);
}
};//utils end
// WINDOW LOAD
$(window).load(function(){
utils.hideAdressbar();
});
</script>
</head>
<body>
<div class="page-wrapper mobile-touch-overflow">
<header class="page-header">Header</header>
<div class="page-content">
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
</div>
<footer class="page-footer">Footer</footer>
</div>
</body>
</html>
工作正常，测试在Android 2.1& iphone4(ios5)
这个代码还有一个问题，在这里修复：
Hide address bar in mobile Safari when scrolling (touchOverflow)
解决方法
最终编辑，解决
它与-webkit-overflow-scrolling无关，而是你的身高：100％。 (不知道为什么我以前错过)。
您的文件之间的唯一区别是< Meta>下面列出的标签更改，并在CSS中注释高度。
经过iPhone 4S / iOS 5.1测试。
原创回应
这就是我们所用的：
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0,1);
},0);
});
它每次都工作。
我们只使用addEventListener，因为我们关心的唯一的手机是基于webkit的…
编辑
你的-webkit-overflow-scrolling div在这里不重要。你尝试将1个像素放在页面上吗？无论如何，任何向下滚动都应该覆盖绝对定位的顶点像素。
编辑
所以我加载了你的一个例子，这是弹出在错误控制台：(这不解决问题，但…)
Viewport argument value "device-width;" for key "width" not recognized. Content ignored. /dev/1/:7Viewport argument value "1.0;" for key "initial-scale" was truncated to its numeric prefix. /dev/1/:7Viewport argument value "1.0;" for key "maximum-scale" was truncated to its numeric prefix.
看看你的< Meta>标签我看到：
<Meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
你需要使用一个，而不是一个;
<Meta content="width=device-width,user-scalable=no" name="viewport" />