猫哥

vuePress-theme-reco 猫哥    2017 - 2025
猫哥 猫哥
主页
博客
  • 杂谈游记
  • 技术笔记
  • 前端技术
  • 前端
  • 杂物收纳
标签
时间轴
关于
author-avatar

猫哥

35

文章

32

标签

主页
博客
  • 杂谈游记
  • 技术笔记
  • 前端技术
  • 前端
  • 杂物收纳
标签
时间轴
关于

uni-app打包成H5,与PC不适配的问题

vuePress-theme-reco 猫哥    2017 - 2025

uni-app打包成H5,与PC不适配的问题

猫哥 2022-11-01 前端

介绍

uni-app打包

既然是写专门的H5站,那说明希望在pc打开,也是H5的排版,比如一体机上,它是网页打开,但是尺寸是1080 * 1920,在pages.json配置:

img

这里我配置了1920,是因为网页端还有1920的尺寸

最大宽度是配置了1920,超出两边留白,这个我测了一下,似乎有点变形,但是我这边目前只需要适配1080的宽度,所以这一点留给大家自己在实际项目里测试吧!

JavaScript Code复制内容到剪贴板

1. "globalStyle": { 
2.   //...自己的配置 
3.   "maxWidth": 1920, //当浏览器可见区域宽度大于 maxWidth 时两侧留白,当小于等于 maxWidth 时页面铺满。不同页面支持配置不同的maxWidth。单位 px。 
4.   "rpxCalcMaxDeviceWidth": 1920, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960 
5.   "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px,默认值为 375 
6.   "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750 
7. },