美文网首页
uniapp中H5端PC宽屏适配

uniapp中H5端PC宽屏适配

作者: 周星星的学习笔记 | 来源:发表于2021-11-01 12:49 被阅读0次

    一、创建pc.js文件

    // #ifdef H5
    (function () {
      var u = navigator.userAgent,
        w = window.innerWidth;
      if (!u.match(/AppleWebKit.*Mobile.*/) || u.indexOf("iPad") > -1) {
        window.innerWidth = 750 * (w / 1920);
        window.onload = function () {
          window.innerWidth = w;
        };
      }
    })();
    // #endif
    

    二、App.vue添加适配样式

    <style lang="scss">
    /*  #ifdef  H5  */
    body {
      max-width: 828rpx;  //最大宽度自己可以调整
      margin: auto !important;
    }
    /*  #endif  */
    </style>
    

    三、main.js中引入pc.js(要在导入app示例之前引入)

    import Vue from "vue";
    //导入PC适配JS(H5)
    // #ifdef H5
    import "./common/services/pc";
    // #endif
    import App from "./App";
    

    相关文章

      网友评论

          本文标题:uniapp中H5端PC宽屏适配

          本文链接:https://www.haomeiwen.com/subject/ituzaltx.html