uniapp宽屏适配

最新推荐文章于 2025-06-18 14:53:11 发布

寒冰射手杨百亿

最新推荐文章于 2025-06-18 14:53:11 发布

阅读量6.1k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ybyshezhang/article/details/114435967

本文介绍了使用uniapp开发的H5页面在大屏幕安卓设备，如电影院取票机上显示过小的问题。问题根源在于rpx单位在超过960像素宽度后不再自动缩放。解决方案是在page.json中调整适配设置，通过更改第一个参数来解决宽屏适配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用uniapp做的H5页面在大屏幕的安卓机器上运行，就是电影院自动取票机的那种尺寸
其分辨率为1080*1920 我原本的代码在上面运行就显得很小
原因===》

在这里插入图片描述
意思就是 rpx这个单位 960像素下可以根据宽度缩放一旦超过960像素就不起作用了

所以要改===》

page.json 把第一个参数改了就完事

{
   
   
  "globalStyle": {
   
   
    "rpxCalcMaxDeviceWidth": 1080, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
    "rpxCalcBaseDeviceWidth": 375,</

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

寒冰射手杨百亿

关注关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Uniapp适配不同尺寸的Android电视机

xiaomomo19的博客

03-19

3102

Uniapp适配不同尺寸的Android电视机

在uni-app中进行单位转换页面适配时，你可能需要处理不同设备上的屏幕尺寸和分辨率，确保页面在移动端和PC端都能良好显示

07-29

1564

在uni-app中进行单位转换页面适配时，你可能需要处理不同设备上的屏幕尺寸和分辨率，确保页面在移动端和PC端都能良好显示。

参与评论您还未登录，请先登录后发表或查看评论

uniapp 横屏开发页面配置（仅支持App、H5）

u012576295的博客

08-30

9171

1、pages.json页配置页面大小在uniapp官网中提到了pages.json页面对于横屏页面单位的配置参考官网这篇详解 https://uniapp.dcloud.net.cn/adapt 由于我开发的横屏项目的横屏设计图分辨率以及硬件分辨率是1280*800，所以我的页面配置是 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "***", "navigationBa

UNIAPP-H5自适应设置

热门推荐

YMX2020的博客

08-12

1万+

uni-app

uniapp学习API之—界面之宽屏适配、字体、下拉刷新

qq_42774794的博客

03-23

945

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。动态加载网络字体，文件地址需为下载类型。设置 topWindow 的样式，参数说明。css 样式对象，需写驼峰css属性，获取 rightWindow 的样式。设置 rightWindow 的样式。获取 leftWindow 的样式。设置 leftWindow 的样式。将rpx单位值转换成px。

关于uniapp 全屏尺寸适配

qq_45763682的博客

01-19

909

uniapp 编写小程序页面全屏应用。

uni-app不同设备屏幕适配兼容问题

qiaoyin33的博客

03-22

3294

/ 引入组件...App})// 判断是否是平板console.log("屏幕尺寸：", res.windowWidth, res.windowHeight)}else{});

uniapp适配解决方法

weixin_68658847的博客

07-10

1758

uniapp适配解决方法

uniapp 屏幕适配问题(折叠屏幕、手机、平板)

weixin_37792440的博客

09-28

3629

【代码】uniapp 屏幕适配问题。

uni-app录制视频插件，视频压缩，支持设置分辨率和视频名称

09-10

uni-app在Android平台上录制视频，支持设置分辨率和视频名称，有取消、重录和完成功能视频录制视频设置分辨率 Android录制视频资源包中有demo源码和相关操作文档

获取android手机的分辨率

05-09

简单的获取手机的分辨率的demo，非常简单，

uni-app （移动端)在不同设备获取当前屏幕分辨率

qq_58671311的博客

07-14

1776

首先在中添加一个盒子准备使用获取到的分辨率；然后在onLoad()中使用uni.getSystemInfo方法（onload 对比Vue的created）；这里因为使用的是箭头函数（因为格式化问题，箭头被恢复成了function），在onLoad里面使用var that = this来避免this的指向问题；最后在中使用获取到的height。也可参考uni-app官网获取分辨率的例子。............

uniapp适配ipad端平板端

^_^

05-11

8390

由于uniapp 最大rpx 适配只能到 980 所以我们要手动去改这个参数 pages.json "globalStyle":{ "rpxCalcMaxDeviceWidth": 2000 } 竖屏转横屏 if(plus.navigator.getOrientation()==0 || plus.navigator.getOrientation()==90){ plus.screen.lockOrientation('landscape'); }else if(pl

uni-app 自定义相机拍照录像，可设置分辨率、支持横竖屏(ios、android)

杨克进的博客

11-12

4814

插件市场：uni-app 自定义相机拍照录像，可设置分辨率、支持横竖屏(ios、android)

uniapp开发横屏app,在pages.json进行相应配置即可

2302_78998868的博客

04-18

764

uniapp中尺寸单位rpx的使用

weixin_40058289的博客

12-03

4847

1、设计稿的基准宽度为 750px, 有一个红色方块宽度为100px，换算成rpx 结果为：100rpx ，也就是说 1rpx = 1px。即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。所以，在实际开发中，1 rpx = 750 * （设计稿宽度 / 设计稿基准宽度）2、设计稿为640px，红色方框宽度为100px，换算成rpx结果为：117rpx。750rpx就是屏幕最大宽度，样式宽度不能超过750rpx。

解决TV安装第三方app不能横屏问题（uni-app）

qq_58671311的博客

07-19

4658

之前做过分辨率为4096*2160电视的app适配，能够很好的铺满屏幕，但是在华为智慧屏SE65电视上安装app后打开出现了横屏问题（问题如图）在mounted中添加强制横屏（建议uni-app的onReady代替vue的mounted），代码如图。另外plus需要在真机（或者模拟器）上运行，在内置浏览器运行会报plus未定义。...

uniapp 配置宽屏适配

03-08

### 宽屏适配的重要性宽屏适配对于提升用户体验至关重要，尤其是在不同设备上展示同一应用时。当已有的代码从小程序迁移到浏览器环境运行时，PC端页面可能会显得过于空旷或布局不合理[^1]。 ### 实现宽屏适配的方法 #### 方法一：调整布局结构针对平板和手机的不同特性，在设计稿层面做出相应改变。具体来说： - 对于原本采用双栏或多栏的设计方案，在移动版本中转换成单一列显示方式； - 调整文字大小和其他UI元素的比例关系，确保视觉效果的一致性和可读性； ```javascript // 动态设置字体大小的例子 if (Vue.prototype.pad) { document.documentElement.style.fontSize = '20px'; // 假设这是适合平板的默认字号 } else { document.documentElement.style.fontSize = '16px'; // 手机上的默认字号较小 } ``` #### 方法二：通过JavaScript检测并响应不同的屏幕尺寸利用`uni.getSystemInfoSync()` API获取当前设备的信息，并据此决定是否启用特定样式或功能逻辑[^2]。 ```javascript const systemInfo = uni.getSystemInfoSync(); if(systemInfo.windowWidth > 500){ Vue.prototype.isPad = true; }else{ Vue.prototype.isPad = false; } // 在组件内部使用该属性来切换样式类名或其他行为 <template> <div :class="{'pad-layout': isPad}">  </div> </template> <script> export default { computed:{ ...mapState(['isPad']) } }; </script> <style scoped lang="scss"> /* 针对平板定义额外的CSS规则 */ .pad-layout { padding-left: 20%; padding-right: 20%; @media only screen and (max-width: 768px) { /* 如果不是平板则忽略这些样式 */ display:none !important ; } } </style> ``` 以上方法可以有效地帮助开发者完成从移动端到桌面端的良好过渡，使得应用程序能够在各种终端上都呈现出最佳状态。