webclip方式uni-app的h5项目,全屏问题

近段时间,公司为了节省劳动力,让我彻底转行uni-app,然而我搜了一下boss,发现uni-app根本没有使用环境,导致我时隔三年又重新装上了boss,智联,51job等一些友好App。

虽然很抗拒,但是本着职业道德,还是要好好干活的,这不,就遇到了一个比较有脑洞的一个需求:

uni发布成h5,用webclip方式搞到苹果手机上(iOS界俗话说的永不掉签)

大家都知道,webclip也就是书签形式的打开一个网页而已,所以就有所谓的地址栏在顶部一直显示着,类似这样:


WechatIMG6.png

看到画红框的地方了么,需求就是为了去掉这个东西,就是为了这个,我研究了一两天。在这里就算做个记录吧。

踩坑

  • 修改页面<meta>配置。(网上最多的方法),例如:

<meta name="apple-mobile-web-app-capable" content="yes" />

还有很多修改meta的方法这就不一一列举了,我都试了,然而是没卵用的,遇到这个东西的人应该也不少。

解决办法

iframe内联框架

既然内部改不了,那就干脆彻底不改uni生成的东西了,外表搞个壳,撑开不就完了。

  1. 首先写一个html文件
  2. html文件里使用iframe框架,返回h5项目的首页即可

具体的html文件写法,拿走不谢:


<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>
            首页
        </title>

    </head>
    <body onload="refit()" style="padding:0;margin:0;">
       <iframe src="/h5/" style="width:100%;height:100%;"  frameborder="0" scrolling="yes"  id="bdIframe"></iframe>
    </body>
</html>
<script>

function refit(){

 oIframe = document.getElementById('bdIframe');
   deviceWidth = document.documentElement.clientWidth;
      deviceHeight = document.documentElement.clientHeight;
      oIframe.style.width = (Number(deviceWidth)) + 'px'; 
      oIframe.style.height = (Number(deviceHeight)) + 'px';

    }

</script>

然后就大功告成,效果如图:


WechatIMG7.png

是不是很像原生!!你要是因为我解决了,憋说话,单击❤️。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容