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

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

本篇文章小编教大家一下简单实用的解决方案

#1 创建一个电脑浏览器中专用的容器html文件pc.html，参考源码如下：

#2 在uni-app项目的 App.vue 文件中写下如下代码：

/* ----- onLaunch 函数中的 JS 代码 ----- */

/* 条件编译，仅在H5平台生效 */
// #ifdef H5
uni.getSystemInfo({
    success(e){
        /* 窗口宽度大于420px且不在PC页面且不在移动设备时跳转至 PC.html 页面 */
        if(e.windowWidth>420 && !window.top.isPC && !/iOS|Android/i.test(e.system)){
            window.location.pathname = '/uniapp-extend/static/html/pc.html';

            /* 若你的项目未设置根目录（默认为 / 时），则使用下方代码 */
            // window.location.pathname = '/static/html/pc.html';
        }
    }
})
// #endif



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

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

 

源码中跳转路径请按照自己的项目文件路径改，因我的项目需要部署到git，则在发行H5平台时定义了根目录，若是默认的 / 直接根目录，则修改正确的目录即可，谢谢！

 

#3 效果预览

电脑浏览器效果：

手机浏览器效果：

#4 在线体验示例及完整源码下载

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

该解决方案是简单快速的，也可以模仿uni-app官方的h5平台demo的解决方式，可自定义h5平台模板，在模板中动态创建 iframe 的方式，得到更好的体验效果，不用通过跳转页面，有兴趣的请去自行学习。

许多人在阅读过我的文章后，都会问我如何带参数的问题。关于这个问题可以在跳转 pc.html 页面之前先获取当前的 地址，然后打开 pc.html 页面后，将跳转前的地址赋值给 iframe 的  src 属性即可！但是带参数的意义不会很大，因为毕竟是移动端的页面，在PC中浏览会有各种事件不兼容的问题，所以去提示一个二维码，让用户去用手机扫码体验会更好。

 

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。