微信小程序 大屏适配指南


本文整理自网络,侵删。

大屏适配指南

目前市面上的用户设备大致可分为小屏的手机端、中屏的平板、大屏的 PC 端三类,而在这三类设备中又会有细小的尺寸差别,也称作屏幕碎片化。

随着小程序能够在越来越多的设备终端上运行,开发者也应该针对不同的屏幕尺寸进行相应的适配。

按照一般的适配原则,结合小程序特点,通常在以下三种情况中需要进行适配:

1. 同一类设备下,尺寸有细微差别

使用小程序提供的 rpx 单位,在尺寸差别不大的情况下对页面布局进行等比缩放。

2. 在允许屏幕旋转的情况下,可分为横屏与竖屏

手机端设置 "pageOrientation": "auto" 或 iPad 上设置 "resizable": true 时会允许屏幕旋转,此时使用 Page 的 onResize 事件或者 wx.onWindowResize 方法可对该操作进行监听,进而判断是使用横屏还是竖屏布局。

3. 不同类设备或者能够自由拖拽窗口的 PC 小程序

小程序目前是基于 Webview 实现,利用CSS 媒体查询可实时监听屏幕尺寸大小,在不同的屏幕下展现不同的 UI 布局,结合Flex 弹性布局、Grid 网格布局便能实现更加响应式的适配方案。

matchMedia - 抽象式媒体查询

阅读剩余部分

相关阅读 >>

微信小程序 运力方使用oncancelauth

微信小程序api 视频-videocontext

微信小程序 小程序使用batchgetorder

微信小程序 运力方使用onorderpreadd

微信小程序 即时配送接口(商家查看)-配送公司信息

微信小程序 使用插件

微信小程序api-设备-系统信息

微信小程序api 发送客服消息

微信小程序 城市服务快速填写组件

微信小程序api 绘图setmiterlimit(设置最大倾斜)

更多相关阅读请进入《微信小程序》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...