首页 > 其他分享 >uni-app打包成H5,与PC不适配的问题

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

时间:2023-11-30 16:00:53浏览次数:41  
标签:maxWidth 适配 app H5 1920 宽度 rpx 默认值

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


这里我配置了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. },

标签:maxWidth,适配,app,H5,1920,宽度,rpx,默认值
From: https://blog.51cto.com/u_16173094/8632132

相关文章

  • MASA MAUI APP前端监控指南
    MAUIBlazor接入到OpenTelemetry近期由于我们APP项目(MAUI+MasaBlazor),需要做运营数据采集埋点,经过综合考虑后,决定采用接入OpenTelemetrySDK的方式,由于目前OpenTelemetry的可测性大部分都是基于后端api的,所以我们也对MAUIBlazor进行接入进行了一番的研究和尝试。开发工具和......
  • Unity屏幕适配的3个妙招
    屏幕适配是面试中必问的一个题目,今天给大家说说怎么样做屏幕适配。对惹,这里有一个游戏开发交流小组,希望大家可以点击进来一起交流一下开发经验呀!设计分辨率大家都好理解,那么什么是适配策略呢?假设我们以设计分辨率是960x640为例,我们要适配到1920x1080上面,大家会发现,这个怎......
  • uniapp使用微信jssdk自定义分享
    前言提示:本文记录的是使用uniapp开发的H5+APP项目,H5端使用微信自定义分享功能,文中有关APP的兼容,如果不需要兼容APP的可以忽略一、引入首先安装jweixin-module包npminstalljweixin-module--save二、封装工具方法为了方便使用,新建一个wechat.js文件://#ifdefH5impo......
  • SpringBoot的配置文件application.yml及加载顺序详解
    SpringBoot配置文件application.yml及加载顺序配置文件分类自定义配置文件配置文件总结Springboot中application.yml、application.properties和bootStrap.yml加载顺序SpringApplication位于项目根目录以jar包发布springboot项目时若application.yml和bootStra......
  • Apple开发_Xcode项目中找不到Products文件、无法找到.ipa文件、无法找到打包后的静态
    1、困扰造成的困扰就是找不到.ipa文件了,如果是运行程序用来生成静态库的话,也无法找到.a后或者.framework文件了;编译出的ipa包想直接拿来用,找不到输出的ipa文件。2、解决办法2.1方法一找到项目文件.xcodeproj右击「显示包内容」打开project.pbxproj文件搜索到如下内容:mainGroup=......
  • Flutter App混淆加固、保护与优化原理
    ​ FlutterApp混淆加固、保护与优化原理引言在移动应用程序开发中,保护应用程序的代码和数据安全至关重要。本文将探讨如何对Flutter应用程序进行混淆、优化和保护,以提高应用程序的安全性和隐私。一、混淆原理混淆是一种代码保护技术,通过修改源代码或编译后的代码,使其难以......
  • Flutter App混淆加固、保护与优化原理
    ​ 引言在移动应用程序开发中,保护应用程序的代码和数据安全至关重要。本文将探讨如何对Flutter应用程序进行混淆、优化和保护,以提高应用程序的安全性和隐私。一、混淆原理混淆是一种代码保护技术,通过修改源代码或编译后的代码,使其难以阅读和理解。混淆的主要目的是提高反编......
  • 电视家APP,从此以后电视盒子只是盒子,再与电视毫无关系
    广电总局封掉了电视家APP,于是我决定把我的“当贝盒子”挂咸鱼了,从此以后电视盒子就只是个盒子。  PS:广电的一刀切简直是绝了,绝绝子。              ......
  • 【SpringBoot】单元测试报错java.lang.IllegalStateException: Could not load TestCo
    一、运行test类方法时候报错 二、分析原因,发现版本不一致 三、找到pom文件, 把<version>RELEASE</version>注释掉,刷新一下maven依赖 四:修改后,依赖版本一致。 这样,就可以运行了。 ......
  • 适配器模式
    1模式动机在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象”放在新的环境中应用,但是新环境要求的接口是这些现存对象所不满足的。如何应对这种“迁移的变化”?如何既能利用现有对象(老接口)的良好实现,同时又能满足新的应用环境所要求的接口?Adapter模式主要应用于“......