jQuery Mobile如何隐藏Mobile Safari的地址栏? [英] How does jquery mobile hide mobile safari's addressbar?
问题描述
jQuery mobile如何隐藏移动浏览器的地址栏?我想我需要类似的解决方案， 但我不想使用jQuery mobile ...
How does jQuery mobile hide mobile safari's addressbar? I think I need a similar solution, but i don't want to use jQuery mobile ...
我尝试过:
http://davidwalsh.name/hide-address-bar
但这对我来说不起作用.
but that doesn't work in my case.
我的第一个孩子是绝对定位的div
与-webkit-overflow-scrolling: touch;
My first child of the body is an absolute positioned div
with -webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling属性似乎导致了此问题，
没有该属性，效果很好.
The -webkit-overflow-scrolling property seems to cause this problem,
without that property it works fine.
此问题的一部分是地址栏始终保持在前台状态，即使我每手向下滚动页面也是如此.这是由于绝对定位引起的.
Part of this problem is the address bar always stays in foreground, even if I scroll the page down per hand. this is caused by the absolute positioning.
但是，如果没有绝对的定位，-webkit-overflow-scrolling:touch;"不起作用...
But, without absolute positioning, "-webkit-overflow-scrolling: touch;" doesn't work ...
在与成千上万行jquery-mobile代码大战之后，我最终得到了这个;)
After a big fight with thousends of lines jquery-mobile code, i ended up with this ;)
解决方案
<!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 +)
works fine, tested in android 2.1 & iphone4(ios5+)
此代码还有另一个问题，已在此处修复: 在移动Safari中滚动(touchOverflow)时隐藏地址栏
there was another Problem with this code, fixed here: Hide address bar in mobile Safari when scrolling (touchOverflow)
推荐答案
最终编辑，已解决
与-webkit-overflow-scrolling无关，而与您的height: 100%无关. (不知道为什么以前错过了它.)
It has nothing to do with -webkit-overflow-scrolling, but rather your height: 100%. (Don't know why I missed it before).
文件之间的唯一区别是下面概述的<meta>标记更改和CSS中的height注释.
The only difference between your file is the <meta> tag changes outlined below and commenting out height in the CSS.
在iPhone 4S/iOS 5.1上进行了测试.
Tested on iPhone 4S/iOS 5.1.
原始响应
这是我们使用的:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
每次都有效.
我们只使用addEventListener，因为我们关心的唯一手机是基于Webkit的...
编辑
And we only use addEventListener since the only phones we care about are webkit based...
EDIT
您的-webkit-overflow-scrolling div在这里无关紧要.您是否尝试过将其向下放置1个像素?无论如何，任何向下滚动都应仅覆盖绝对定位的div的顶部像素.
编辑
Your -webkit-overflow-scrolling div shouldn't matter here. Have you tried placing it 1 pixel down on the page? Regardless, any scroll down should just cover the top pixel of your absolutely positioned div.
EDIT
所以我加载了您的示例之一，并且在错误控制台中弹出了:(这不能解决问题，但是...)
So I loaded one of your examples and this is popping up in the error console: (this doesn't fix the issue, but...)
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>标签，我看到了:
Looking at your <meta> tag I see:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
您需要使用,而不是;
<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
这篇关于jQuery Mobile如何隐藏Mobile Safari的地址栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
