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

￡神魔★判官ぃ 2023-06-29 10:44 208阅读 0赞

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

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

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

> 首先，附上官方的适配方案链接：[https://uniapp.dcloud.net.cn/adapt][https_uniapp.dcloud.net.cn_adapt]，在条件允许的情况下，也欢迎大家使用官方的方案解决问题，在官方的方案中也有提到使用iframe的方式解决。

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

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

> **pc.html 文件需要放在项目根目录的 static 文件夹下**

<!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,maximum-scale=1,minimum-scale=1">
            <title>uni-app h5平台在电脑浏览器打开解决方案</title>
            <meta name="Copyright" content="helang">
            <link rel="shortcut icon" type="image/png" href="/uniapp-extend/static/logo.png">
            <meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪">
            <meta name="description" content="公众号:web-7258,QQ:1846492969,邮箱:helang.love@qq.com">
            <style type="text/css">
                body{
                    margin: 0;
                    background-color: #f3f3f3;
                }
                iframe{
                    width: 375px;
                    height: 667px;
                    background-color: #fff;
                    box-sizing: content-box;
                    border: none;
                }
    			
                @media screen and (min-width: 450px) {
                    iframe {
                        position: fixed;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        margin: auto;
                        border: rgba(0,0,0,0.7) solid 10px;
                        border-radius: 4px;
                    }
                }
            </style>
            <script type="text/javascript">
                window.isPC = true;
    
                window.onload = function(){
                    /* 监听电脑浏览器窗口尺寸改变 */
                    window.onresize = function(){
                        /* 窗口宽度 小于或等于420px 时，跳转回H5页面 */
                        if(window.innerWidth <= 420){
                            window.location.pathname = '/uniapp-extend';
    
                        /* 若你的项目未设置根目录（默认为 / 时），则使用下方代码 */
                        // window.location.pathname = '';
                        }
                    }
                }
            </script>
        </head>
        <body>
            <iframe src="/uniapp-extend"></iframe>
            
        </body>
    </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 效果预览 #

电脑浏览器效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

手机浏览器效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1][]

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

1.  git仓库：[https://gitee.com/myDarling/uniapp-extend][https_gitee.com_myDarling_uniapp-extend]
2.  H5预览：[https://mydarling.gitee.io/uniapp-extend][https_mydarling.gitee.io_uniapp-extend]
3.  在线示例效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 2][]

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

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

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。

[https_uniapp.dcloud.net.cn_adapt]: https://uniapp.dcloud.net.cn/adapt
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200112120031457.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200112120054854.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU=,size_16,color_FFFFFF,t_70
[https_gitee.com_myDarling_uniapp-extend]: https://gitee.com/myDarling/uniapp-extend
[https_mydarling.gitee.io_uniapp-extend]: https://mydarling.gitee.io/uniapp-extend
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021070922183019.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU=,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/u013350495