惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

云风的 BLOG
云风的 BLOG
GbyAI
GbyAI
G
Google Developers Blog
Engineering at Meta
Engineering at Meta
月光博客
月光博客
腾讯CDC
Recent Announcements
Recent Announcements
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
SegmentFault 最新的问题
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
阮一峰的网络日志
阮一峰的网络日志
博客园 - 【当耐特】
The GitHub Blog
The GitHub Blog
Last Week in AI
Last Week in AI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
aimingoo的专栏
aimingoo的专栏
Google DeepMind News
Google DeepMind News
Y
Y Combinator Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Martin Fowler
Martin Fowler
A
About on SuperTechFans
博客园 - 叶小钗

博客园 - MvloveYouForever

添加gitignore mac安装小龙虾 flutter重新学习 添加ssh后,ssh-rsa fatal: Could not read git合并提交 cordova打印插件备注 H5开发类似rpx实现方法 maven仓库地址 idea与其他软件激活办法 linux常用命令总结 Command line is too long mysql安装教程备份 mybatis-plus 条件参数说明 关于打包electron应用 关于spring unicloud短信不能用 关于mybatis 关于maven vue2 和 vue3的区别 父子组件v-modle,vue2和vue3的区别 Vue3知识点
uniapp简单移动端H5电脑端适配方案
MvloveYouForever · 2025-01-04 · via 博客园 - MvloveYouForever

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";