jquery mobile如何隐藏mobile safari的地址栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9798158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does jquery mobile hide mobile safari's addressbar?
提问by JensT
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 ...
jQuery mobile 如何隐藏 mobile safari 的地址栏？我想我需要一个类似的解决方案，但我不想使用 jQuery mobile ...
I tried:
我试过：
http://davidwalsh.name/hide-address-bar
http://davidwalsh.name/hide-address-bar
but that doesn't work in my case.
但这在我的情况下不起作用。
My first child of the body is an absolute positioned div
with -webkit-overflow-scrolling: touch;
我身体的第一个孩子是一个绝对定位的 div -webkit-overflow-scrolling: touch;
The -webkit-overflow-scrollingproperty seems to cause this problem,
without that property it works fine.
该-webkit-overflow-scrolling属性似乎会导致此问题，如果没有该属性，它就可以正常工作。
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.
这个问题的一部分是地址栏总是保持在前台，即使我每手向下滚动页面也是如此。这是由绝对定位引起的。
But, without absolute positioning, "-webkit-overflow-scrolling: touch;" doesn't work ...
但是，没有绝对定位，“-webkit-overflow-scrolling: touch;” 不起作用...
After a big fight with thousends of lines jquery-mobile code, i ended up with this ;)
在与无数行 jquery-mobile 代码大打出手之后，我最终得到了这个 ;)
Solution
解决方案
<!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>
works fine, tested in android 2.1 & iphone4(ios5+)
工作正常，在 android 2.1 和 iphone4(ios5+) 中测试
there was another Problem with this code, fixed here: Hide address bar in mobile Safari when scrolling (touchOverflow)
此代码还有另一个问题，已修复： 滚动时隐藏移动 Safari 中的地址栏 (touchOverflow)
回答by tkone
FINAL EDIT, SOLVED
最终编辑，已解决
It has nothing to do with -webkit-overflow-scrolling, but rather your height: 100%. (Don't know why I missed it before).
它与-webkit-overflow-scrolling您无关，而与您的height: 100%. （不知道为什么我之前错过了）。
The only difference between your file is the <meta>tag changes outlined below and commenting out heightin the CSS.
您的文件之间的唯一区别是<meta>下面概述的标记更改和heightCSS 中的注释。
Tested on iPhone 4S/iOS 5.1.
在 iPhone 4S/iOS 5.1 上测试。
ORIGINAL RESPONSES原始回复
This is what we use:
这是我们使用的：
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
It works everytime.
它每次都有效。
And we only use addEventListenersince the only phones we care about are webkit based...
我们只使用，addEventListener因为我们关心的唯一手机是基于 webkit 的......
EDIT编辑
Your -webkit-overflow-scrollingdiv 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.
您的-webkit-overflow-scrollingdiv 在这里无关紧要。你有没有试过把它放在页面上 1 像素？无论如何，向下滚动应该只覆盖绝对定位的 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.
Looking at your <meta>tag I see:
看着你的<meta>标签，我看到：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
You need to use a ,not a ;
你需要使用一个,不是;
<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
回答by Richard Maxwell
I'm adding this because I wasted some time debugging this. The scroll bar will only hide if the page is longer than the viewport. If your page is too short, and can't scroll, then this code does not hide the address bar.
我添加这个是因为我浪费了一些时间来调试它。只有当页面长于视口时滚动条才会隐藏。如果您的页面太短，无法滚动，则此代码不会隐藏地址栏。
This is right, no reason to hide if there isn't any content to make space for, but it did take me a couple minutes to figure out why it was working on some pages and not others.
这是对的，如果没有任何内容可以腾出空间，就没有理由隐藏，但我确实花了几分钟才弄清楚为什么它在某些页面上工作而不是在其他页面上工作。
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
回答by Ikke
<meta name="apple-mobile-web-app-capable" content="yes" />
回答by codaniel
This is the code JQM uses:
这是 JQM 使用的代码：
// Scroll page vertically: scroll to 0 to hide iOS address bar, or pass a Y value
silentScroll: function( ypos ) {
if ( $.type( ypos ) !== "number" ) {
ypos = $.mobile.defaultHomeScroll;
}
// prevent scrollstart and scrollstop events
$.event.special.scrollstart.enabled = false;
setTimeout(function() {
window.scrollTo( 0, ypos );
$( document ).trigger( "silentscroll", { x: 0, y: ypos });
}, 20 );
setTimeout(function() {
$.event.special.scrollstart.enabled = true;
}, 150 );
}
