美文网首页
【Meta标签】实现wap网页去掉手机浏览器默认工具栏

【Meta标签】实现wap网页去掉手机浏览器默认工具栏

作者: andreaxiang | 来源:发表于2019-03-04 13:18 被阅读0次

去掉wap端手机浏览器头部搜索栏和底部工具栏的方法:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
<meta name="apple-mobile-web-app-title" content="yeziyuan" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" /> 
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<!--苹果Safari、QQ浏览器、UC浏览器:-->
<!--删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!--QQ强制全屏-->
<meta name="x5-fullscreen" content="true">
<!--UC强制全屏-->
<meta name="fullscreen" content="yes">

移动web前端开发,隐藏浏览器地址栏(全屏)解决方案
核心代码:window.scrollTo(0, 1);
要注意的几个点:这个方法要在内容加载完成后执行,换句话浏览器内容的高度要超过浏览器窗口高度(出现‘滚动条’)才有效。针对高度自适应的窗口(height:100%),得用特殊方式解决。

//强制让内容超过   
$('#main').css("height",window.innerHeight+100);   
window.scrollTo(0, 1);   
//重置成新高度   
$("#main").css("height",window.innerHeight);   
//非常重要,用于兼容不同机型,防止浏览器窗口移动   
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

另外说明,最后一行,用于阻止浏览器默认动作的手指滑动滚动页面。

相关文章

网友评论

      本文标题:【Meta标签】实现wap网页去掉手机浏览器默认工具栏

      本文链接:https://www.haomeiwen.com/subject/clabuqtx.html