jquery mobile如何隐藏移动safari的地址栏？
jQuery mobile如何隐藏移动safari的地址栏？ 我想我需要一个类似的解决方案，但我不想使用jQuery mobile …
我试过了：
但这在我的情况下不起作用。
我身体的第一个孩子是一个绝对定位的div -webkit-overflow-scrolling: touch ;
-webkit-overflow-scrolling属性似乎导致了这个问题，没有该属性它可以正常工作。
部分问题是地址栏始终保持在前台，即使我每手向下滚动页面。 这是绝对定位造成的。
但是，没有绝对定位，“-webkit-overflow-scrolling：touch;” 不起作用……
在使用jquery-mobile代码的thousends进行了一场大战之后，我最终得到了这个;）
解
title 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; } /* * 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 = $( "" ).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(); }); Header
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
###
工作正常，在Android 2.1和iphone4（ios5 +）测试
此代码还有另一个问题，修复此处： 滚动时隐藏移动版Safari中的地址栏（touchOverflow）
最终编辑，已解决
它与-webkit-overflow-scrolling无关，而是与你的height: 100%无关。 （不知道为什么我以前错过了它）。
您的文件之间的唯一区别是下面列出的标记更改和CSS中的注释height 。
在iPhone 4S / iOS 5.1上测试过。
原始反应
这就是我们使用的：
window.addEventListener("load",function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0); });
它每次都有效。
我们只使用addEventListener因为我们唯一关心的手机是基于webkit的……
编辑
你的-webkit-overflow-scrolling div在这里不重要。 您是否尝试将其放在页面上1个像素？ 无论如何，任何向下滚动应该只覆盖你绝对定位的div的顶部像素。
编辑
所以我加载了你的一个例子，这是在错误控制台中弹出的:(这不能解决问题，但……）
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.
看看你的标签，我看到：
你需要使用a而不是a ;
我添加这个是因为我浪费了一些时间调试它。 滚动条仅在页面长于视口时隐藏。 如果您的页面太短，并且无法滚动，则此代码不会隐藏地址栏。
这是正确的，没有理由隐藏，如果没有任何内容可以腾出空间，但它确实花了我几分钟来弄清楚它为什么在某些页面而不是其他页面上工作。
window.addEventListener("load",function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0); });
这是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 ); }