我怀疑是用了个可滑动的div。
可是它的高度又该怎么设置呢?怎么兼容大部分浏览器呢?
到底是隐藏隐藏。。。。
方法:
百度js隐藏手机地址栏和菜单栏
js代码示例:
if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}
<script>
window.onload=function(){
setTimeout(function() {
window.scrollTo(0, 1)
}, 0);
};
</script>
Android 和 ios两个平台要用不同的实现方法。
Android版的实现方法:
function hideAddressBar_android(){ var n = navigator.userAgent; if(n.match(/UCBrowser/i)){ //uc浏览器 hideAddressBar_ios(); return false; } var self = document.getElementsByTagName( body )[0]; if (self.requestFullscreen) { //html5新增的全屏方法 self.requestFullscreen(); } else if (self.mozRequestFullScreen) { //针对mozlia内核的hack self.mozRequestFullScreen(); } else if (self.webkitRequestFullScreen) { //针对webkit内核的hack self.webkitRequestFullScreen(); } };
iOS版的实现方法:
给页面添加一个载入事件的监听; 页面载入完成后,延迟100毫秒后使页面向上移动一部分,使地址栏隐藏掉。
window.addEventListener( load , function(){ if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { bodyTag = document.getElementsByTagName( body )[0]; bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + px ; } setTimeout(function(){ window.scrollTo(0, 1); }, 100); }); mata加入方法 <meta name= viewport content= width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui /> <meta name= apple-mobile-web-app-capable content= yes /> <meta name= apple-touch-fullscreen content= no /> <style type= text/css >
div固定底部:
position:fixed;
bottom:0;
这个方法简单好用
运用这个CSS把DIV永远置于页面的底部
利用绝对定位,然后设置底部距离为0
.header{ position:fixed; left:0; top:0; width:100%; height:100px; z-index:9999; background-color:#000;}
//固定头部搜索栏
有问题在webkit浏览器内核f12调试下就好了
参考下阿里巴巴国际UED前端出品的移动端UI库 url:http://m.sui.taobao.org/compo...