小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序首页是个刚好一屏的页面，但是由于主内容都放在了安全区内，在大屏手机上的顶部和底部就会显得很空，然后想让一个元素在大屏手机上（也就是可以放下这个元素）显示该元素，小屏手机（因为放不下这个元素）不显示该元素，请问有什么方法可以实现这样的效果吗？我不知道使用wx.getSystemInfo这个API获取屏幕信息后，大屏手机和小屏手机之间的这个临界值该怎么设。求解，谢谢。
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
首先，这个大还是小是比较难确定的，屏幕千千万，分辨率dpr啥的只能有个普遍规律，你都不能准确地按照当前获取的参数来判断。
我的思路是，设计稿实现时，统一用rpx换算。决定某些安全区元素显不显示则通过获取当前屏幕的长宽，再用你设计稿的长宽做个比例公式，得出当前屏幕宽度是超了还是没超，超了的就是大屏，没超就小屏。
我想的公式：var showArea = (设计稿宽 / (设计稿高 + 元素高度) >= 设备宽 / 设备高 );
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
那如果那个元素它是一直距离手机屏幕最底部多少多少距离呢，那它就不在安全区内了吧？你说的那个设计稿高指的不是整个设计稿的高吧？
那我可能没表达清楚，我说的设计稿宽/高，应该是设计稿参考的设备屏幕宽高。
而且我上面说的都是假设设计稿在选定的设备上不发生滚动的情况。
嗯，就是这个设计稿在手机设备上都要一屏显示，不发生滚动的，因为有背景图，设计稿的宽高是iphoneX的750*1624，然后内容都放在了750*1206里，只有那个在大屏手机上显示的元素放在了外面，所以这个比例公式按照你说的的话，应该是？另外底部还有个tabbar，设计稿上忘做了。
首先获得手机屏幕的尺寸，然后判断；
长度大于多少，宽度大于多少，属于大屏。
然后：
wx:if="{isLarge}"
就是不知道这个长度大于多少才属于大屏，就靠我这边看设计稿能不能显示下这个元素来选个临界值了吧？
你们的UI拖出动砍了吧。
这么简单的问题，设计稿上加上尺度不就一目了然了？两张稿：放得下这个元素的一张，量出长和宽；放不下这个元素的一张，量出长和宽。
这个是刚好要显示一屏，不能滑动的，然后设计稿给的尺寸是iphoneX的，750*1624，因为有背景图。另外这个设计稿还有底部的tabbar，设计稿上忘做了，我还不太明白那个要根据手机屏幕显示的元素应该在超出多少的临界值下去显示。
我看不出这里为什么不可以做成自适应大小的？后面的背景图可以自适应屏幕，红框也可以自适应，小木板也可以，蓝框的文字也可以一直浮在底部这个位置。
哪里需要管它大屏小屏？
小屏的为什么放不下，rpx不是可以自适应吗？我用iphone5也可以和iphone6,7一样的效果啊
就是这个设计稿（iphone6的）上这个元素已经放到安全区外了，设计的时候就是说长点的手机把这个元素放到距离底部多少的位置，小手机如果再放这个元素就会遮挡住其他主内容了。
css 媒体查询
请问下如果使用媒体查询，那我这个min-height的这个值该如何确定呢，确定了之后，不同手机都可以做到适配吗。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
首先，这个大还是小是比较难确定的，屏幕千千万，分辨率dpr啥的只能有个普遍规律，你都不能准确地按照当前获取的参数来判断。
我的思路是，设计稿实现时，统一用rpx换算。决定某些安全区元素显不显示则通过获取当前屏幕的长宽，再用你设计稿的长宽做个比例公式，得出当前屏幕宽度是超了还是没超，超了的就是大屏，没超就小屏。
我想的公式：var showArea = (设计稿宽 / (设计稿高 + 元素高度) >= 设备宽 / 设备高 );
那如果那个元素它是一直距离手机屏幕最底部多少多少距离呢，那它就不在安全区内了吧？你说的那个设计稿高指的不是整个设计稿的高吧？
那我可能没表达清楚，我说的设计稿宽/高，应该是设计稿参考的设备屏幕宽高。
而且我上面说的都是假设设计稿在选定的设备上不发生滚动的情况。
嗯，就是这个设计稿在手机设备上都要一屏显示，不发生滚动的，因为有背景图，设计稿的宽高是iphoneX的750*1624，然后内容都放在了750*1206里，只有那个在大屏手机上显示的元素放在了外面，所以这个比例公式按照你说的的话，应该是？另外底部还有个tabbar，设计稿上忘做了。
首先获得手机屏幕的尺寸，然后判断；
长度大于多少，宽度大于多少，属于大屏。
然后：
wx:if="{isLarge}"
就是不知道这个长度大于多少才属于大屏，就靠我这边看设计稿能不能显示下这个元素来选个临界值了吧？
你们的UI拖出动砍了吧。
这么简单的问题，设计稿上加上尺度不就一目了然了？两张稿：放得下这个元素的一张，量出长和宽；放不下这个元素的一张，量出长和宽。
这个是刚好要显示一屏，不能滑动的，然后设计稿给的尺寸是iphoneX的，750*1624，因为有背景图。另外这个设计稿还有底部的tabbar，设计稿上忘做了，我还不太明白那个要根据手机屏幕显示的元素应该在超出多少的临界值下去显示。
我看不出这里为什么不可以做成自适应大小的？后面的背景图可以自适应屏幕，红框也可以自适应，小木板也可以，蓝框的文字也可以一直浮在底部这个位置。
哪里需要管它大屏小屏？
小屏的为什么放不下，rpx不是可以自适应吗？我用iphone5也可以和iphone6,7一样的效果啊
就是这个设计稿（iphone6的）上这个元素已经放到安全区外了，设计的时候就是说长点的手机把这个元素放到距离底部多少的位置，小手机如果再放这个元素就会遮挡住其他主内容了。
css 媒体查询
请问下如果使用媒体查询，那我这个min-height的这个值该如何确定呢，确定了之后，不同手机都可以做到适配吗。