微信小游戏适配刘海屛

最新推荐文章于 2024-08-02 11:10:21 发布
最新推荐文章于 2024-08-02 11:10:21 发布
阅读量1.6k 收藏 2
点赞数 2
分类专栏： 微信小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42276579/article/details/104016753
版权

1.获取手机的刘海高度

api: wx.getSystemInfoSync().safeArea
在这里插入图片描述
竖屏游戏下使用top，横屏游戏使用left
如果游戏在非全屏状态下获取的是0，所以无需考虑是不是全屏问题

后来发现刘海的值是top还是left和你进入游戏时手机是竖屏还是横屏有关，我们的是横屏手机，扫码进入游戏时是竖屏的，所以刘海高度是top值，但你无法知道用户当时的姿势，所以取 top || left，取有值的那个作为刘海高度

转化为游戏内坐标

安卓中：

比例 = 游戏设计尺寸（宽或高） / 屏幕尺寸（宽或高）
然后 刘海高度 * 比例即可转为游戏内坐标

ios中：

开发者工具获取的值和真机是不一样的，以真机为准
测试发现ios给的值不用乘游戏比例，直接使用即可，我是取出刘海后加10作为偏移，效果可以

liuyonggen123
关注
专栏目录
开发微信小程序--适配 iPhone 等型号总结
weixin_48596030的博客
02-02 1493
开发微信小程序--适配 iPhone X 总结
微信小游戏屏幕适配方案
热门推荐
1022_zhang的专栏
05-15 1万+
首发于我的个人博客 很久没有发文了，最近一直在研究微信小游戏，屏幕适配问题真的是哪里都存在。 无奈论坛资料及可行的解决方案还是太少，还是得靠自己。 且来看一看在微信上如何达到适配多样化屏幕 奔着解决方案来的可直达解决方案 工具 LayaAir 引擎 TypeScripte 语言 需要关注的点 主要集中在背景图及边框附近的UI元素位置重设 缩放后安全区域（不会被裁切）...
Unity 微信小游戏 UI 刘海屏适配
weixin_38027841的博客
04-26 757
【代码】Unity 微信小游戏 UI 刘海屏适配。
Cocos Creator微信小游戏关于刘海屏、微信胶囊按钮的适配
最新发布
wwbwwwwww的博客
08-02 560
通过获取到的游戏尺寸的高（或宽）度除手机尺寸的高（或宽）度即可得到当前游戏尺寸与手机尺寸的垂直（或水平）方向的。手机安全区域范围的计算：在之前提到的接口2的返回值中有一个名为safeArea的属性，这个属性会返回手机屏幕尺寸下手机安全范围相对于左上角的距离。追加：有些刘海屏手机的刘海长度会超过微信胶囊按钮的位置，为了保证这种情况下游戏画面内顶端信息不受手机刘海遮挡，需要进一步计算手机安全区域的范围。用获取到的胶囊按钮的各项尺寸长度乘相应方向的比例即可得到游戏内的尺寸长度。
微信小程序屏幕适配不同的iPhone
小天空的博客
12-27 8945
wx.getSystemInfo(Object object) | 微信开放文档 wx.getSystemInfo({ success (res) { console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) console.log(res.language) console.log(re..
《laya踩坑日记》 微信小游戏刘海屏适配问题
weixin_41640571的博客
12-14 1673
登录微信可以获得微信的系统信息systemInfo根据systemInfo中的top属性判断，刘海屏一般大于20 top乘屏幕像素比 在除缩放比例。 传入一个box，然后改变box的top即可。 ...
为游戏适配刘海屏
weixin_34245169的博客
12-10 928
刘海屏的纵横比 手机 分辨率 屏幕纵横比 刘海高度 刘海宽度 圆角大小 正常1080 1080*1920 1.7777 iphone x 1125*2436 2.16533 iphone xs max 1242*2688 2.16425 华为P20 pro 1080*2240 2.074074 81 华为荣耀 10 1080*2280 2.111...
微信小程序如何判断刘海屏
BradenHan的专栏
04-20 1908
这个适配比较简单，用一下微信小程序的API即可。但是一定要考虑全面：不是所有的iphone手机都有刘海屏。特别注意：本文中示例代码，判断手机型号那块，代码写的很烂，很有优化空间。千万别直接使用，建议自行优化。
微信小程序 uniapp - iPhoneX 刘海屏适配
zxh7770的博客
09-09 1172
一、js直接调用wx.getSystemInfoSync Page({ data: { isIPhoneX:false, }, onLoad: function () { this.setData({ "isIphoneX": this.isIphoneX() }) }, isIphoneX() { let res = wx.getSystemInfoSync(); if (res.screenHeight == 812 || res.sc
基于EGRET的大型项目转微信小游戏开发总结——各种坑处理
我要MEANING
06-17 4264
原文链接：基于EGRET的大型项目转微信小游戏开发总结——各种坑处理http://51meaning.cn/blog/?p=412 这阵在做基于Egret的微信小游戏，项目很大，也踩了很多坑，特总结如下，供各位难兄难弟参考！ 1、window.Main=Main;换成window.Main=项目实际入口Main[带包类路径]; 2、目前白鹭小游戏支持解析 xml 了吗，该如何使用？ 答： ...
Unity3D与微信小程序（游戏）交互
04-25
https://blog.csdn.net/u013032852/article/details/119605522?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165085824316781683968174%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165085824316781683968174&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-8-119605522.142^v9^pc_search_result_cache,157^v4^control&utm_term=unity&spm=1018.2226.3001.4187
Cocos Creator 多分辨率适配方案.zip
01-15
方案是为解决特定问题或达成特定目标而制定的一系列计划或步骤。它的作用是提供一种系统性的方法，以有效地应对挑战、优化流程或实现目标。以下是方案的主要作用： 问题解决： 方案的核心目标是解决问题。...
说说Laya微信小游戏适配问题
nyyin@qq.com
03-03 5237
一 前言 经常有同行对于Laya小游戏适配问题不懂如何处理，特别是目前手机端游戏屏幕大小各不相同，宽高比例更是五花八门。 就微信开发者工具里面的模拟器屏幕大小就有以下这些： 模拟器里面仅仅列出的部分屏幕大小而已，Android手机的屏幕大小更是五花八门，以后随着折叠手机的出现，恐怖如何适配小游戏更是比较困难，需要好好考虑的问题了。 本文就目前出现的大部分手机屏幕，给出可以近乎完美的适配方案。对于...
微信小游戏可视化开发 如何适应手机屏幕
laya1211的博客
03-31 428
微信可视化开发工具是一个在线工具，有些人可能会遇到一个问题，在电脑上和手机上预览时布局是存在差异的。
微信小程序 - iPhoneX 刘海屏适配
iotjin的专栏
07-23 4299
微信小程序适配 iPhone X 总结 方法一 js直接调用wx.getSystemInfoSync 底部 <view class='btn' style='padding-bottom:{{ isIphoneX ? 68 : 0 }}rpx;'>底部</view> 1 判断是否是iPhoneX const app = getApp() Page({ data: { isIPhoneX:false, }, onLoad: function () { .
微信小游戏之CocosCreator多分辨率场景适配方案
星期一的博客
06-24 3275
前言：小游戏开发过程中大家如何进行多分辨率适配的？ 回顾一下官方文档对分辨率适配的介绍：https://docs.cocos.com/creator/manual/zh/ui/multi-resolution.html。 以前读完后总是有一种似懂非懂的感觉，所以实践后总结关于小游戏适配三要素：Canvas + Widget + Scale 。 一、cocosCreater窗口大小/设计分辨率/视图边框尺寸/试图中canvas尺寸等和之间关系。 let winSize = cc.winSi
微信小游戏
dt1991524的博客
08-03 527
前一阵，微信的跳一跳小游戏很是火，打破了之前说的不会推出游戏的说法，2017年12月22日，微信发布了微信小游戏的体验版，打开自己的微信小程序账号，找到如下图：   屏幕快照 2018-03-05 上午10.18.17.png 小游戏点击上图中的小游戏，查看文档，目前小游戏不提供公开注册，可点击体验小游戏使用无 AppID 模式。   F0A8E5D1-5EAB-4A99-A41...
uniapp微信小程序自定义刘海屏头部兼容问题
qq_40043424的博客
07-03 4575
首先说一下，现在iPhone有刘海屏的一些型号（iPhone X iPhone XR iPhone XS Max…）; 通俗点说，因为微信小程序头部这玩意：如果需要和它平齐写一个头部样式的话，刘海屏会向下压一部分高度从而导致样式不平齐。所以我的解决办法是给他一个占位符，将它压下的高度给他顶起来。 <view class="fit" v-if="fit"> <!-- 占位兼容刘海屏 --> </view> uni.getSystemInfo(OBJECT
微信小游戏中的three.js离屏渲染实践
"微信小游戏中使用three.js实现离屏画布技术的示例代码和方法" 在微信小游戏中，为了优化性能和处理复杂的3D图形，开发者常常会使用离屏画布（Off-screen Canvas）技术。这篇内容主要介绍了如何将three.js的3D渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值