前言

调试基础库 2.12.0
微信开发者工具 1.03.2008270
uniapp 开发者工具 HBuilderX 2.9.8

ios 上元素高度出现异常

通过微信开发者工具预览无问题。

安卓真机上表现正常：

ios真机上表现不正常：

分析过程

使用微信开发者工具提供的真机调试功能，在 ios 真机上进行调试。查看元素样式是否存在异常。

因使用rpx作为长度单位，首先检查了元素样式的单位是否为rpx，发现转换为了px。经过测试，微信小程序将rpx转换为px的过程并无问题。
精简页面上的元素，确定是否因某个元素引起的
当将元素数量减少到不足一页时，出现高度异常。
在调试状态下，将 page 元素的高度样式去掉，异常消失。

解决办法

page{height: 100%;
}

修改为：

page{min-height: 100%;
}

也可以去掉该样式。

微信小程序rpx作为高度单位时，在 ios 出现异常相关推荐

微信小程序获取视口高度,设置 video 视频全屏显示
微信小程序获取视口高度获取视口高度可用于设置视频全屏显示效果及其他效果显示 js中:(可以在onLoad中直接使用,或写入方法中) let that = this;// 获取系统信息wx.ge ...
微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
微信小程序返回上一级页面时刷新页面
问题描述: 微信小程序返回上一级页面时需要重新加载一下数据问题解决: 方法一: 在需要返回的页面的onShow(){}方法中调用要刷新数据的方法方法二: goBack(){let pages = ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
微信小程序布局中的单位及使用：px、rem、rpx、vw、vh、n%
没接触过 JavaScript.CSS.HTML的小白直接开始接触微信小程序的开发,在了解了各个部分的作用以后,布局的时候就发现:怎么这么多单位??? px.rem.rpx.vw.vh.n% 为了不总 ...
微信小程序css单位,微信小程序 rpx 尺寸单位详细介绍
微信小程序最近火了,大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢,面对不同的手机屏幕,微信 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应, 微信小程序 ...
微信小程序 - rpx和px互转，以及系统给的 pixelRatio 值比例不对
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 750rpx = 37 ...
微信小程序 rpx和px转换
前言微信小程序使用的是rpx 不管屏幕宽度是多少,将宽度划分成750份,1份就是1rpx 获取屏幕真实的宽度 wx.getSystemInfoSync().windowWidth rpx和px转换公 ...

微信小程序rpx作为高度单位时，在 ios 出现异常

前言

ios 上元素高度出现异常

分析过程

解决办法

微信小程序rpx作为高度单位时，在 ios 出现异常相关推荐

最新文章

热门文章