简介

uni-app 开发的 H5 页面在电脑浏览器打开，还是会占满全屏，压根用不了。其实也没这使用需求，但是为了电脑端打开好看点，并且引导用户用手机打开，所以做了适配。

简单来说，就是通过 iframe 来实现，这种方式无需过多的代码来适配，并且通过 qrcode.js 生成二维码，方便用户手机扫码，下面简单说下。

相关文件

这里将 adapt-pc 目录打包了，下载解压后直接放在 static 目录下即可。

下载 adapt-pc.zip

然后在自定义的 template.h5.html 文件加上以下代码：

<link rel="stylesheet" href="<%= BASE_URL %>static/adapt-pc/pc.css" />
<script type="text/javascript" src="<%= BASE_URL %>static/adapt-pc/pc.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>static/adapt-pc/qrcode.js"></script>
<uni-adapt-pc></uni-adapt-pc>
<script type="text/html" id="tpl-adapt-pc">
	<div class="container">
		<div class="iframe">
			<iframe src="mobile-href"></iframe>
		</div>
		<div class="content">
			<h1><%= htmlWebpackPlugin.options.title %></h1>
			<div id="h5-qrcode" class="qrcode"> </div>
			<p>使用手机扫描二维码获得更佳体验</p>
		</div>
	</div>
</script>
<script>
	setTimeout(() => {
		let curUrl = window.location.href;
		new QRCode(document.getElementById("h5-qrcode"), {
			text: curUrl,
			width: 200,
			height: 200,
		});
	}, 300)
</script>
		

效果预览

手机端不影响，电脑端用 iframe 展示页面，并且右侧有二维码，指引用户用手机体验。