admin 管理员组文章数量: 887021
使用 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/myDarling/uniapp-extend
- H5预览：https://mydarling.gitee.io/uniapp-extend
六、小编的自问自答
1) 电脑端兼容模板为什么要用 <script> 标记包裹？
恭喜你发现了一个小细节，这是一个优化问题，可以在非电脑的浏览情况下不加载电脑端模板的资源。
2) 手动改变浏览器宽度后，为什么不会动态切换模板内容？
在用户的正常使用中根本不会出现的问题，一个开发者自己YY出来的无价值问题解决它本身就是无价值的。强迫症可以自己完善窗口变化情况和 移动/电脑的判断逻辑。
作者：黄河爱浪
本文原创，著作权归作者所有，转载请注明原链接及出处。
版权声明：本文标题：uni-app h5平台在电脑浏览器打开解决方案 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1727322478h1101559.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论