如何实现大屏手机上显示某元素,小屏手机不显示该元素。
发布于 4 年前 作者 mzhong 5941 次浏览 来自 问答

小程序首页是个刚好一屏的页面,但是由于主内容都放在了安全区内,在大屏手机上的顶部和底部就会显得很空,然后想让一个元素在大屏手机上(也就是可以放下这个元素)显示该元素,小屏手机(因为放不下这个元素)不显示该元素,请问有什么方法可以实现这样的效果吗?我不知道使用wx.getSystemInfo这个API获取屏幕信息后,大屏手机和小屏手机之间的这个临界值该怎么设。求解,谢谢。

4 回复

首先获得手机屏幕的尺寸,然后判断;

长度大于多少,宽度大于多少,属于大屏。

然后:

wx:if="{isLarge}"

首先,这个大还是小是比较难确定的,屏幕千千万,分辨率dpr啥的只能有个普遍规律,你都不能准确地按照当前获取的参数来判断。

我的思路是,设计稿实现时,统一用rpx换算。决定某些安全区元素显不显示则通过获取当前屏幕的长宽,再用你设计稿的长宽做个比例公式,得出当前屏幕宽度是超了还是没超,超了的就是大屏,没超就小屏。

我想的公式:var showArea = (设计稿宽  / (设计稿高 + 元素高度) >= 设备宽 / 设备高 );

小屏的为什么放不下,rpx不是可以自适应吗?我用iphone5也可以和iphone6,7一样的效果啊

css 媒体查询

回到顶部