uni-app h5平台在电脑浏览器打开解决方案

置顶黄河爱浪

已于 2024-07-07 17:47:30 修改

阅读量2w

点赞数 16

分类专栏： uni-app 文章标签： uni-app H5 电脑浏览器打开手机页面

于 2020-01-12 12:05:10 首次发布

本文链接：https://blog.csdn.net/u013350495/article/details/103941613

版权

uni-app 专栏收录该内容

19 篇文章 10 订阅

订阅专栏

使用 uni-app开发 H5平台项目在电脑浏览器中因浏览器分辨率问题会导致 rpx 单位元素尺寸过大，很是影响美观。

本篇文章教大家的方法是使用 <iframe> 的方式来实现的，目前官方也增加了PC端的适配，其他的优秀博主也有相关的设置页面最大宽度的方法。但是限制宽度并不是重点，页面上弹窗，定位布局，移动事件，支付都是存在兼容问题的。

我相信现在在看这篇文章的你也是在之前的代码中没有考虑过PC的兼容，所以现在去实现一个PC版的兼容有必要吗？倒不如在现在代码中做最小的改动，并引导用户去使用移动设备或者扫码下载APP和小程序会更合适。

首先，附上官方的适配方案链接：uni-app官网，在条件允许的情况下，也欢迎大家使用官方的方案解决问题，在官方的方案中也有提到使用iframe的方式解决。

本篇文章小编教大家一下简单实用的解决方案（可自行修改pc页面的效果，美化并添加二维码、app、小程序的引导信息）

一、自定义H5平台模板

1) 参考官方文档添加自定义模板文件并配置

Vue3版本可跳过该配置，直接修改根目录中的 index.html 文件即可

uni-app H5平台自定义模板文档https://uniapp.dcloud.io/collocation/manifest.html#h5-template

2) 模板源码添加电脑端兼容代码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- 该处省略模板其它 head 内容 -->
		<!-- uni-app 电脑端浏览兼容样式表 -->
		<link rel="stylesheet" href="<%= BASE_URL %>static/adapt-pc/pc.css" />
    </head>
    <body>
        <!-- 该处省略模板其它 body 内容 -->

        <div id="app"></div>
		
		<!-- uni-app 电脑端兼容模板容器 -->
		<uni-adapt-pc></uni-adapt-pc>

		<!-- uni-app 电脑端兼容模板 -->
        <!-- 注意： 电脑端放置H5内容容器，helang-mobile-href 为固定标识不可修改 -->
		<script type="text/html" id="tpl-adapt-pc">
			<div class="container">
				<iframe src="helang-mobile-href"></iframe>
			</div>
		</script>

		<!-- uni-app 电脑端浏览兼容脚本文件 -->
		<script type="text/javascript" src="<%= BASE_URL %>static/adapt-pc/pc.js"></script>
    </body>
</html>

二、创建电脑端兼容相关文件

1) 在项目的 static 目录中创建 adapt-pc 文件夹，并在文件夹中创建 pc.css 和 pc.js 文件，目录参考如下

项目根目录
├─static
│  └─adapt-pc
│    └─pc.css
│    └─pc.js
└─其他文件

2) pc.css 文件源码

body[adapt='pc']>*{
	display: none !important;
}

body[adapt='pc']>uni-adapt-pc{
	display: block !important;
}

body[adapt='pc'] {
	margin: 0;
	background-color: #fff;
	width: 100vw;
	height: 100vh;
}

body[adapt='pc'] uni-adapt-pc .container{
	position: fixed;
	width: 375px;
	height: 100%;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-height: 680px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	box-shadow: 0 0 10px #ddd;
}

body[adapt='pc'] uni-adapt-pc iframe{
	width: 100%;
	height: 100%;
	border: none;
}

3) pc.js 文件源码

;(function(){
	if(window.innerWidth < 768){
		return;
	}
	var tpl = document.querySelector("#tpl-adapt-pc").innerHTML || '';
	tpl = tpl.replace('helang-mobile-href',window.location.href);
	document.querySelector("uni-adapt-pc").innerHTML = tpl;
	document.body.setAttribute("adapt","pc");
})();

三、效果预览

1) 电脑端

2) 手机端

四、其他优化

1) 隐藏滚动条，改善电脑端展示效果

/* ==== App.vue 文件 ==== */
/* 为了避免电脑浏览器中的滚动条影响到布局，可在 style 标记中添加如下 CSS 代码*/

/* 条件编译，仅在H5平台生效 */
// #ifdef H5
body::-webkit-scrollbar,html::-webkit-scrollbar {
    display: none;
}
// #endif

五、源码和示例

git仓库：https://gitee.com/myDarling/uniapp-extend
H5预览：https://mydarling.gitee.io/uniapp-extend

六、小编的自问自答

1) 电脑端兼容模板为什么要用 <script> 标记包裹？

恭喜你发现了一个小细节，这是一个优化问题，可以在非电脑的浏览情况下不加载电脑端模板的资源。

2) 手动改变浏览器宽度后，为什么不会动态切换模板内容？

在用户的正常使用中根本不会出现的问题，一个开发者自己YY出来的无价值问题解决它本身就是无价值的。强迫症可以自己完善窗口变化情况和移动/电脑的判断逻辑。

作者：黄河爱浪

本文原创，著作权归作者所有，转载请注明原链接及出处。

黄河爱浪

关注

16
点赞
踩
63

收藏

觉得还不错? 一键收藏
29
评论
uni-app h5平台在电脑浏览器打开解决方案

本篇文章教大家的方法是使用的方式来实现的，目前官方也增加了PC端的适配，其他的优秀博主也有相关的设置页面最大宽度的方法。但是限制宽度并不是重点，页面上弹窗，定位布局，移动事件，支付都是存在兼容问题的。
复制链接

扫一扫

专栏目录