uniapp宽屏适配

最新推荐文章于 2024-09-28 14:04:28 发布
最新推荐文章于 2024-09-28 14:04:28 发布
阅读量5.6k 收藏 15
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ybyshezhang/article/details/114435967
版权
本文介绍了使用uniapp开发的H5页面在大屏幕安卓设备，如电影院取票机上显示过小的问题。问题根源在于rpx单位在超过960像素宽度后不再自动缩放。解决方案是在page.json中调整适配设置，通过更改第一个参数来解决宽屏适配问题。
摘要由CSDN通过智能技术生成

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

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

所以要改===》

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

{
   
  "globalStyle": {
   
    "rpxCalcMaxDeviceWidth": 1080, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
    "rpxCalcBaseDeviceWidth":
最低0.47元/天 解锁文章
寒冰射手杨百亿
关注
uniapp适配pc_uni-app H5 平台在 PC 端实现适配
weixin_39936792的博客
12-20 6381
该文章已过时，请忽视。从 uni-app 2.9 起，官方已提供了 PC 等宽屏的适配方案。使用 uni-app 开发的 H5 页面，为了根据屏幕宽度自适应，我们一般都采用官方推荐的动态单位 rpx，但是在 PC 端展现的时候可能出现文字等相关元素太大，导致页面错乱或不美观。为了解决该问题，我们可以限定页面最大宽度，超过就固定宽度，并居中显示。比如 笔者 要开发一个 uni-app 应用，在 PC...
获取android手机的分辨率
05-09
简单的获取手机的分辨率的demo，非常简单，
uniappPC页面宽度768~960之间时，显示内容过大的问题【解决记录】
Fyhang_work的博客
02-28 1774
项目是移动端的，有一个PC版官网，此外的页面都是直接适配移动端样式。有几次发现在PC微信浏览器打开（小窗口模式）样式就会变得很乱，具体表现为字体和盒子尺寸异常放大。起初以为是微信浏览器的问题，后来发现在其他浏览器，窗口尺寸在一定范围的时候也会有同样的问题。经过测试，这个范围是宽度769px~960px。
uniapp 横屏开发页面配置（仅支持App、H5）
u012576295的博客
08-30 7920
1、pages.json页配置页面大小 在uniapp官网中提到了pages.json页面对于横屏页面单位的配置 参考官网这篇详解 https://uniapp.dcloud.net.cn/adapt 由于我开发的横屏项目的横屏设计图分辨率以及硬件分辨率是1280*800，所以我的页面配置是 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "***", "navigationBa
uniapp 屏幕适配问题(折叠屏幕、手机、平板)
最新发布
weixin_37792440的博客
09-28 605
【代码】uniapp 屏幕适配问题。
uni-app （移动端)在不同设备获取当前屏幕分辨率
qq_58671311的博客
07-14 1564
首先在中添加一个盒子准备使用获取到的分辨率； 然后在onLoad()中使用uni.getSystemInfo方法（onload 对比Vue的created）；这里因为使用的是箭头函数（因为格式化问题，箭头被恢复成了function），在onLoad里面使用var that = this来避免this的指向问题；最后在中使用获取到的height。也可参考uni-app官网获取分辨率的例子。............
uni-app录制视频插件，视频压缩，支持设置分辨率和视频名称
09-10
uni-app在Android平台上录制视频，支持设置分辨率和视频名称，有取消、重录和完成功能 视频录制 视频设置分辨率 Android录制视频 资源包中有demo源码和相关操作文档
Uniapp适配不同尺寸的Android电视机
xiaomomo19的博客
03-19 1888
Uniapp适配不同尺寸的Android电视机
UniApp 获取屏幕分辨率
Lix0777的博客
03-17 3527
首先我们需要获取设备的屏幕分辨率，那么就需要用到官方提供的方法。 我们在 onLoad 的生命函数里面来运行这个方法 onLoad: function() { uni.getSystemInfo({ success: (res) => { } }) } 根据官方文档的讲解，里面包含很多参数，看自己的需求来获取，同时官方也是对各个平台的差异做出了说明，参数有点多，就只截图一部分，详情请转至获取系统内容 已知 windowHeight 参数是获取...
图文详解uni-app PC端宽屏适配方案
热门推荐
YMX2020的博客
08-12 1万+
uni-app
uniapp学习API之—界面之宽屏适配、字体、下拉刷新
qq_42774794的博客
03-23 858
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。动态加载网络字体，文件地址需为下载类型。设置 topWindow 的样式 ，参数说明。css 样式对象，需写驼峰css属性 ，获取 rightWindow 的样式。设置 rightWindow 的样式。获取 leftWindow 的样式。设置 leftWindow 的样式。将rpx单位值转换成px。
uniapp 多屏幕适配
09-06
- *1* *2* *3* [UNIAPP 宽屏适配 响应式](https://blog.csdn.net/qq_43129072/article/details/130936969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
uniapp自动适配 页面在移动端正常显示，在宽屏设备上变为平行视界效果，需要示例代码
05-23
可以使用Flex布局来实现页面在不同屏幕大小下的自适应显示。...这样，在移动设备上，页面会正常显示，而在宽屏设备上，页面会呈现平行视界效果。你可以根据需要调整样式，实现更符合你需求的效果。
uniapp自动适配，移动端页面正常显示正常跳转 宽屏设备页面效果变为平行视窗效果，母页面在左，子页面在右
05-24
要实现在宽屏设备上页面效果变为平行视窗效果，可以使用响应式布局和媒体查询来实现。以下是一个简单的示例： 1. 在页面头部添加以下代码，使页面响应式布局： ```html , initial-scale=1, maximum-scale=1, user-...
关于uniapp 全屏尺寸适配
qq_45763682的博客
01-19 709
uniapp 编写小程序页面全屏应用。
在uni-app中进行单位转换页面适配时，你可能需要处理不同设备上的屏幕尺寸和分辨率，确保页面在移动端和PC端都能良好显示
07-29 1081
在uni-app中进行单位转换页面适配时，你可能需要处理不同设备上的屏幕尺寸和分辨率，确保页面在移动端和PC端都能良好显示。
uniapp适配ipad端平板端
^_^
05-11 7746
由于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 4491
插件市场：uni-app 自定义相机拍照录像，可设置分辨率、支持横竖屏(ios、android)
uniapp开发横屏app,在pages.json进行相应配置即可
2302_78998868的博客
04-18 653
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值