uniapp的app项目,在华为pad上运行,页面显示异常

最开始为了好调试,运行成h5在浏览器调试的,调完以后,放到pad上。。。天塌了,所有页面异常,感觉被放大了好多,而且页面很乱。。。

查了很多资料,说把px改为rpx,好,全部改了,页面还是很大。。。

然后就查说改mainfest或者page.json中的rpxCalcMaxDeviceWidth"和"rpxCalcBaseDeviceWidth":,也改了,还是不行

还有设置viewport meta标签,这个本身代码设置过了,也不行

后来同事提醒说可能是pad的显示设置被调了,然后改了pad设置中的显示和字体大小,有希望!!!页面总算有点正常显示了(前提是把px都改为了rpx)

但是,每个页面还是感觉被放大了1.2倍,怎么调都不行,然后问各种AI工具,总算deepseep说中了"最小宽度设置",如下:

检查鸿蒙Pad的系统设置

让用户检查设备的以下设置:

  1. 显示设置中的"字体大小与显示大小"

  2. 开发者选项中的"最小宽度"设置

  3. 无障碍设置中的"显示大小"

什么是最小宽度?

因为我的设备时华为MatePad Pro,所以是800dp,然后看了pad的最小宽度,不知道被谁动过,改成713了。。。。。。然后改为800,再打开项目页面,正常了!!!!!

另外会发现最小宽度经常变,可以设置固定

总结:如果uniapp的app项目,在pad上显示不正常,试下如下步骤:

1、将所有px改为rpx,可以按照设计稿的尺寸来写页面,只不过把px改成rpx就可以。

2、检查pad的设置,显示和字体 设置,以及开发人员中的最小宽度(如果经常变化,可以关闭智能分辨率)

3、图片,需要设置,不然会原尺寸显示。

background-size: cover; /* 或 contain, 100% 100% */
background-repeat: no-repeat;
background-position: center;

相关推荐
奶糖 肥晨25 分钟前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
2501_916007473 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
chensi_074 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
iOS阿玮5 小时前
AppStore提审混合开发技术选型,独立开发者和公司都适用。
uni-app·app·apple
2501_9159214310 小时前
TCP 抓包分析实战,从抓取到定位(命令、常见症状、排查流程与真机抓包补充)
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone
2501_9160137410 小时前
App 上架服务全流程解析,iOS 应用代上架、ipa 文件上传工具、TestFlight 测试与苹果审核实战经验
android·ios·小程序·https·uni-app·iphone·webview
小样还想跑10 小时前
UniApp键盘监听全攻略
vue.js·uni-app·计算机外设
2501_9159090612 小时前
App Store 上架完整流程解析,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 测试与苹果审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9160088912 小时前
iOS 26 全景揭秘,新界面、功能创新、兼容挑战与各种工具在新版系统中的定位
android·macos·ios·小程序·uni-app·cocoa·iphone
Jyywww12121 小时前
双列瀑布流+分页技术的实现(uniapp)
uni-app·瀑布流·分页技术