webclip方式uni-app的h5项目，全屏问题
2020-04-20 本文已影响0人
IT_机器猫
近段时间，公司为了节省劳动力，让我彻底转行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生成的东西了，外表搞个壳，撑开不就完了。
- 首先写一个html文件
- 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
是不是很像原生！！你要是因为我解决了，憋说话，单击❤️。
