16
jQueryモバイルはモバイルSafariのアドレスバーをどのように隠すのですか？私は同様のソリューション、 が必要だと思うが、私はjQueryのモバイルを使用したくない...jquery mobileはモバイルサファリのアドレスバーをどのように隠すのですか？
私が試した：
http://davidwalsh.name/hide-address-bar
をそれが私の場合には動作しません。
体の最初の子は絶対配置されたdivです と-webkit-overflow-scrolling: touch;
プロパティ-webkit-overflow-scrollingこの問題の原因は、 そのプロパティが正しく動作していないようです。
この問題の一部は、ページを手でスクロールしても、アドレスバーは常にフォアグラウンドにとどまります。これは絶対位置決めによるものです。
しかし、絶対的な位置付けをせずに、 "-webkit-overflow-scrolling：touch;"ラインjqueryのモバイルコードのthousendsと大喧嘩した後...
動作しません、私はこれで終わった;）
ソリューション
<!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>
がでテストし、正常に動作しますアンドロイド2.1 & iPhone4の（iOS5を用+）。このコードの別の問題があった
は、ここでは固定： Hide address bar in mobile Safari when scrolling (touchOverflow)
私はすでにその解決策をリンク！私が言ったように、 "-webkit-overflow-scrolling：touch;"では動作しません。絶対的な位置付け、最初に質問を読む方法について... – JensT
私はそれを読んで、私の答えを更新しました。あなたはそれを正しく実装していますか？私はあなたがそれにリンクしていることを知っていますが、私はモバイルページを持っています。実生活で、実際にこのコードをコピーしてこの回答に貼り付けました。それらのすべてのページは、そこに含まれる要素に適用されているCSSルールに関係なく、アドレスバーをうまく隠すことができます。あなたは電話でコンソールをオンにして、あなたのイベントが正しく発射されないようなエラーがあるかどうかを調べましたか？ – tkone
thx、どちらも動作しません...常にフォアグラウンドに留まるアドレスバーはどうですか？ – JensT