1、小程序屏幕适配

例如：iPhone5、iPhone6/7/8、iPhoneX/XR等屏幕大小问题。或者如下布局被按钮组件覆盖问题。

分析：这两种问题其实都是一样的解决方案。有些组件给予它固定的width和height会导致在不同型号的手机会有遮挡变形之类。下图是因为container布局的大小与底部固定的按钮覆盖了（position:fixed）

2、解决方案

2.1 屏幕适配

不同型号的手机遇到组件、布局等变形了，多半是没有考虑使用rpx，或者选择了固定的手机，设置固定的rpx。

我们就可以考虑使用系统函数，获取当前机型的屏幕width和height。然后使用你觉得合适的机型的（通常是iPhone6下）长宽比例。然后在style属性中设置即可。

// 适配屏幕高度_fitScreenSize(){let windowHeight = wx.getSystemInfoSync().windowHeight;let windowWidth = wx.getSystemInfoSync().windowWidth;this.setData({// px转换为rpx,高度需要减去你的固定组件高度100rpx//(我这里按钮高度100rpx)screenHeight: windowHeight * 750 / windowWidth - 100});},

<!-- 应用在页面中 -->
<view class="order-container" style="height:{{screenHeight}}rpx;">

2.2 radio的大小调整

https://blog.csdn.net/u012780336/article/details/80487467

3、使用效果

微信小程序|开发实战篇之十三---小程序布局/组件/屏幕适配问题相关推荐

微信小程序|开发实战篇之九-image-picker图片选择器组件及其子组件
开发实战篇之九前言 1.grid格子组件 1.1 grid骨架文件wxml 1.2 grid的js文件分析 1.3 grid-item的wxml文件分析 1.4 grid-item的wxss文件分析 ...
微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件前言实战篇内容参考: ...
微信小程序|开发实战篇之七-steps进度条组件
开发实战篇之七前言 0.知识点补充 0.1 $emit()函数 0.2 wxs 0.3 ⚡组件间关系 1.steps进度条组件 1.1.step进度条单元的骨架文件wxml 1.2.step进度条单 ...
微信小程序|开发实战篇之五-slide-view滑动菜单组件
开发实战篇之五前言 1.微信小程序操作dom元素 1.1 slide-view组件的wxml骨架文件 1.1.1 涉及movable-view组件属性 1.2 slide-view组件的js文件 1 ...
微信小程序|开发实战篇之二
开发实战篇之二前言 1.零碎知识点和优化点 1.1 ES6模板字符串 1.2 ES6扩展运算符 1.3 独立更新like组件状态 1.4 自定义组件支持hidden 2.音乐music组件开发 2. ...
微信小程序|开发实战篇之一
开发实战篇之一前言 1.通用方法的封装 2.数据获取方法的封装 2.1 抽离classic.js中的request()方法 2.2 组件数据传递 3.movie组件的创建 3.1 组件代码开发 3. ...
微信小程序|开发实战篇之request请求（单个、多个参数，json对象，header）
开发实战篇之request请求前言 1.发送单个.多个参数的request 2.发送JSON对象的request 3.发送header的request 前言小程序发送网络请求常会遇到的问题: 请求 ...
微信小程序|开发实战篇之四
开发实战篇之四前言 1.用户页面my的开发 1.1 my.wxml骨架文件 1.2 my页面的布局和样式分析 1.2.1 从原型页面来分析: 1.2.2 继续分析每个大组件中的小组件布局: 1.3 ...
微信小程序|开发实战篇之三
开发实战篇之三前言 1.使用Promise获取多个异步方法的结果 2.高阶组件-search 2.1 search组件的基本结构 2.1.1 search组件的骨架index.wxml文件 2.1. ...

微信小程序|开发实战篇之十三---小程序布局/组件/屏幕适配问题

适配除去一些固定组件的屏幕高度