Uniapp在屏幕尺寸低于960出现样式错乱(开箱即用)

于 2024-06-17 10:37:00 发布
阅读量328 收藏 3
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_77072102/article/details/139736215
版权

我司项目突然要做平板兼容,我在调试的时候发现当屏幕尺寸低于960px发现样式但凡是以rpx单位的全部失效，如果是以px为单位那么影响就比较小，当时解决方案是写了不少媒体查询和把单位rpx改成px，后面查阅文档发现大错特错宽屏适配只需一行代码即可解决。  

对比图↓↓↓

官网也有文字说明但是文字比较多 配置rpxCalcMaxDeviceWidth属性即可兼容

宽屏适配指南 | uni-app官网

步骤配置 找到文件pages.json

	"globalStyle": {
		"rpxCalcMaxDeviceWidth": 375
	},

凉辰
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp小程序横屏显示样式错乱
hu104160112的博客
06-15 1199
vmax 相对于视口的宽度或高度中较大的那个，其中最大的那个被均分为100单位的vmax。vmin 相对于视口的宽度或高度中较小的那个，其中最小的那个被均分为100单位的vmin。这里我们用vmin，100vmin也就是手机屏幕宽度，一般设计图是750rpx。在开发中有时候会需要开发横屏页面，正常竖屏页面的样式横屏之后会放大错乱。
UNIAPP 宽屏适配 响应式
qq_1126043450的博客
05-29 2542
由于公司老项目只适用于安卓 ios手机端，完全按照 750px 做的适配，现如今公司特殊屏幕需要使用1280*720。需要进行适配，工期比较端 中间可能还会有各种平板电脑的适配，因此采用的bootstrap 响应式布局，但是uniapp 无法使用媒体查询 故自己实现了响应式布局。
uni-app不同设备屏幕适配兼容问题
qiaoyin33的博客
03-22 2502
/ 引入组件...App})// 判断是否是平板console.log("屏幕尺寸：", res.windowWidth, res.windowHeight)}else{});
uniapp rpx在超过960时样式错位的问题，uniapp兼容ipad平板配置
L_C_sunny的博客
03-09 2236
在移动设备上也有很多屏幕宽度，设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于，各种移动设备的屏幕宽度差异不是很大，相对于750px微调缩放后的效果，尽可能的还原了设计师的设计。但是，一旦脱离移动设备，在pc屏幕，或者pad横屏状态下，因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期，大的惨不忍睹。“这里需要对rpx的使用特别强调一下。
图文详解uni-app PC端宽屏适配方案
热门推荐
YMX2020的博客
08-12 1万+
uni-app
uniapp的宽屏适配
m0_62856712的博客
03-31 431
一些小小的demon
vue 返回上一页,页面样式错乱的解决
10-15
今天小编就为大家分享一篇vue 返回上一页,页面样式错乱的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
防止RadioButton在RecyclerView中滑动出现错乱
01-14
然而，当RecyclerView中的item包含交互性元素如RadioButton或EditText时，可能会遇到一些问题，特别是当用户在滑动时，数据状态可能会出现错乱。这个问题主要源于RecyclerView的复用机制，它会重用不再可视的item...
vue使用swiper时出现的布局错乱问题.zip
10-12
vue 使用swiper时出现的布局错乱问题 https://mp.csdn.net/mdeditor/102522543#
UTF-8 BOM 可能导致样式错乱的解决方法
10-29
utf-8 是一种在web应用中经常使用的一种 unicode 字符的编码方式，使用 utf-8 的好处在于它是一种变长的编码方式，对于 ANSII 码编码长度为1个字节，这样的话在传输大量 ASCII 字符集的网页时，可以大量节约网络带宽...
用IE11打开网页布局错乱如何解决-.docx
09-27
标题中的问题直指一个常见的浏览器兼容性问题，即在使用Internet Explorer 11（IE11）时，打开某些网页导致布局错乱。这可能是由于网页设计采用了不完全支持的HTML5特性，或者IE11的渲染引擎与网页代码存在不兼容...
uniapp-开发APP端（踩坑、调试打包）
最新发布
十五春会的博客
04-10 901
uniapp开发APP端各个事项，包含审核发布踩坑指南。
uniapp实现用户全局设置应用字体大小（适用于各端）
AKA多个A的博客
08-17 4165
vuex_fontsize: 9, //数值根据自己项目调整。
关于uni-app使用rpx出现字体等样式在iPad上不兼容问题
App Store.公众号.小程序:分享录
12-21 7934
周六终于下决心把早已开发出稳定版本的分享录iOS版APP提交App Store审核了，今天早上收到邮件发现被拒绝回来了，其中有个问题就是在iPad显示有问题影响用户体验，如下图： 一时感觉有点奇怪，我明明是使用rpx，在iPhone等手机上看是没问题，为什么在iPad上字体会变得这么臃肿，到uni-app官网查一下，发现有下面这样一段话：“ 这里需要对rpx的使用特别强调一下。 在移动设备上也有很多屏幕宽度，设计师一般只会按照750px屏幕宽度出图。此时使用rpx的好处在于，各种移动设备的屏幕宽度
uniapp宽屏适配
ybyshezhang的博客
03-06 5236
用uniapp做的H5页面 在大屏幕的安卓机器上运行，就是电影院自动取票机的那种尺寸 其分辨率为1080*1920 我原本的代码在上面运行就显得很小 原因===》 意思就是 rpx这个单位 960像素下可以根据宽度缩放 一旦超过960像素就不起作用了 所以要改===》 { "globalStyle": { "rpxCalcMaxDeviceWidth": 1080, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 "rpxCalcBaseDeviceWidth":
uniapp学习API之—界面之宽屏适配、字体、下拉刷新
qq_42774794的博客
03-23 779
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。动态加载网络字体，文件地址需为下载类型。设置 topWindow 的样式 ，参数说明。css 样式对象，需写驼峰css属性 ，获取 rightWindow 的样式。设置 rightWindow 的样式。获取 leftWindow 的样式。设置 leftWindow 的样式。将rpx单位值转换成px。
uniapp 适配pad大屏
技术不够，加班来凑
10-10 2633
引用博客大佬
uniapp自动识别并切换到pad端、pc端【不断更新】【伸手党福利】
wwppp987的博客
11-21 3238
uniapp自动识别并切换到pad端、pc端【不断更新】【伸手党福利】leftwindow发起请求。detail添加监听。
uni-app 对照设计稿还原不同屏幕像素适配（iPhone X）
专注基础架构领域
06-25 3771
​ 最近项目中需要高频度使用单位像素换算，以适配不同屏幕大小的需求，这里我以蓝湖为例，下面我给出换算步骤： 1、把蓝湖设计稿选到 ios 端，这时候页面单位变成了pt，因为我们iPhone X的屏幕和这个设计稿的宽度一样是375px（我们这里对照的真机也是iPhone X），所以这里我们可以看做 1pt = 1px = 2rpx，图示如下： 2、如果是需要随着屏幕宽度不同而随之改变的，我们使用rpx进行css样式计算，遵循 1pt = 2rpx 的计算公式，这里我们需要加上安全区域（不同手机的安全区
wxml2canvas多次生成图片后，在安卓手机样式错乱
07-17
在使用wxml2canvas多次生成图片后，如果在安卓手机上出现样式错乱的情况，可能是由于以下原因导致的： 1. 渲染时机问题：在安卓手机上，由于渲染机制的不同，可能需要等待图片加载完成后才能正确渲染图片。可以尝试添加图片加载完成的回调或者等待一段时间再生成下一张图片。 2. 缓存问题：安卓手机可能会对图片进行缓存，导致重复生成的图片使用了缓存的旧图片。可以尝试在每次生成图片前手动清除缓存。 3. 安卓手机兼容性问题：不同的安卓手机厂商可能会对WebView进行定制，导致在某些手机上出现样式错乱的问题。可以尝试更新手机系统或者使用其他解决方案。 4. wxml2canvas库本身的问题：可能是wxml2canvas库在安卓手机上存在一些兼容性问题。可以尝试寻找其他类似功能的库或者向wxml2canvas的开发者寻求帮助。 需要根据具体情况进行排查和调试，可以尝试以上几个方面来解决安卓手机上样式错乱的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值