uniapp h5端兼容pc端

深海烟火

已于 2022-11-07 11:46:51 修改

阅读量4k

点赞数 2

分类专栏： uniapp vue 文章标签： uni-app 前端 javascript

于 2022-10-31 16:59:14 首次发布

本文链接：https://blog.csdn.net/honey_kg/article/details/127619108

版权

uniapp 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

大致效果就是用pc端打开h5网页，然后pc端可以像h5那样，不过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";

注意：“可能在pc端刷新会页面撑大，建议直接把最大宽度(max-width直接给定死到你要的“px”单位而不是rpx单位，所有的rpx单位都得换成px单位，因为pc端不支持rpx单位)”

比如我这里写的是828prx，那直接写成414px单位，如果觉得还是有点宽的话，可以改小一点，按照自己的需求来