jquery mobile如何隐藏mobile safari'；地址栏是什么？
jQuery mobile如何隐藏mobile safari的地址栏？我想我需要一个类似的解决方案， 但我不想使用jQuery mobile 我试过： 但这对我来说不起作用 我身体的第一个孩子是一个绝对定位的div 使用jquery mobile如何隐藏mobile safari'；地址栏是什么？,jquery,jquery-mobile,mobile-safari,Jquery,Jquery Mobile,Mobile Safari,jQuery mobile如何隐藏mobile safari的地址栏？我想我需要一个类似的解决方案， 但我不想使用jQuery mobile 我试过： 但这对我来说不起作用 我身体的第一个孩子是一个绝对定位的div 使用-webkit溢出滚动：触摸 -webkit溢出滚动属性似乎导致此问题， 如果没有这种特性，它可以正常工作 这个问题的一部分是地址栏总是停留在前台，即使我每只手向下滚动页面。这是由绝对定位引起的 但是，如果没有绝对定位，“-webkit overflow scrolling:t
-webkit溢出滚动：触摸
-webkit溢出滚动
属性似乎导致此问题，
如果没有这种特性，它可以正常工作
这个问题的一部分是地址栏总是停留在前台，即使我每只手向下滚动页面。这是由绝对定位引起的
但是，如果没有绝对定位，“-webkit overflow scrolling:touch；”不起作用
在与数千行jquery移动代码进行了激烈的斗争之后，我最终得到了这个；）
解决方案
<!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>
标题
身体{
背景：#e0；
保证金：0；
填充：0；
}
.页面包装器{
宽度：自动；
}
/*本机溢出滚动*/
.移动触摸溢出{
溢出：自动；
-webkit溢出滚动：触摸；
-moz溢出滚动：触摸；
-o-溢出-滚动：触摸；
-ms溢出滚动：触摸；
溢出滚动：触摸；
}
.移动触摸溢出，
.移动触摸溢出*{
/*某些级别的转换可以防止元素在iOS上闪烁而不可见*/
-webkit变换：rotateY（0）；
}
.页眉{
显示：块；
背景：灰色；
边框底部：1px实心#CDCDCD；
填充：10px；
}
.网页内容{
填充：10px；
}
.页脚{
显示：块；
边框顶部：1px实心#CDCDCD；
左边距：10px；
右边距：10px；
填充：10px；
左侧填充：0；
右边填充：0；
文本对齐：居中；
字体大小：12px；
颜色：#FFF；
}
/*
*乌提尔斯
*/
变量utils={
supportTouchOverflow:函数（）{
return！！utils.propExists（“overflowScrolling”）；
},
支持方向：函数（）{
返回（窗口中的“方向”和窗口中的“onorientationchange”）；
},
//只需将活动页面的最小高度设置为屏幕高度，具体取决于方向
getScreenHeight:函数（）{
var orientation=utils.getOrientation（），
端口=方向==“纵向”，
winMin=端口？480:320，
screenHeight=端口？screen.availHeight:screen.availWidth，
winHeight=Math.max（winMin，$（window.height（）），
pageMin=Math.min（屏幕高度，winHeight）；
返回pageMin；
},
//获取当前页面方向。此方法已公开，是否应该公开
//如jQuery.event.special.orientationchange.orientation（）所需
getOrientation:function（）{
var isPortrait=true，
elem=document.documentElement，
纵向映射={0:true，“180:true}；
//与基于屏幕大小的计算相比，更喜欢窗口方向
//实际屏幕大小调整发生在方向更改事件之前或之后
//根据具体实施情况（如之前的安卓2.3版本，之后的iphone版本）。
//需要更多的测试来确定是否有更可靠的方法来确定新的屏幕尺寸
//当触发方向更改时，此选项是可能的。（例如，使用媒体查询+元素+不透明度）
if（utils.supportOrientation（））{
//如果窗口方向记录为0或180度，则报告
//肖像画，否则风景画
isPortrait=纵向贴图[window.orientation]；
}否则{
isPortrait=elem&&elem.clientWidth/elem.clientHeight<1.1；
}
返回isPortrait？“肖像”：“风景”；
},
silentScroll:功能（ypos）{
setTimeout（函数（）{
滚动到（0，ypos）；
}, 20 );
},
propExists：函数（prop）{
var fakeBody=$（“”）.prependTo（“html”），
fbCSS=fakeBody[0]。样式，
供应商=[“Webkit”、“Moz”、“O”]，
uc_prop=prop.charAt（0）.toUpperCase（）+prop.substr（1），
道具=（道具+“”+供应商。加入（uc_道具+“”）+uc_道具）。拆分（“”）；
用于（道具中的变量v）{
如果（fbCSS[props[v]！==未定义）{
fakeBody.remove（）；
返回true；
}
}
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
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 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" />
// 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 );
}
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
<meta name="apple-mobile-web-app-capable" content="yes" />