美文网首页
【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