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

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

4 回复

首先获得手机屏幕的尺寸，然后判断；

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

然后：

wx:if="{isLarge}"

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

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

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

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

css 媒体查询

回到顶部