首页 > 其他分享 >uniapp简单移动端H5电脑端适配方案

uniapp简单移动端H5电脑端适配方案

时间:2025-01-04 23:22:14浏览次数:1  
标签:uniapp 适配 innerWidth H5 pc window ifdef

1、创建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

2、App.vue添加适配样式

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

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

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

  

标签:uniapp,适配,innerWidth,H5,pc,window,ifdef
From: https://www.cnblogs.com/Mvloveyouforever/p/18652755

相关文章