关于屏幕适配的奇怪感觉

关于canvas的fitHeight和fitWidth,一开始是这么理解的:1.高宽比例大于自己的设计分辨率,那应该是优先宽度满,高度按比例缩放,也就是fitWidth为true,fitHeight为false,这样结果是宽度满屏,上下有黑;2.高宽比例小于设计分辨率,则相反,fitWidth为false,fitHeight为true,即优先填满高度,宽度按比例缩放,这样是高度满,左右有黑。按道理应该是这样吧?但昨天突然不是,感觉自己一直以来打开方式不对啊。。。。。。我设计分辨率是高度1280,宽度720.微信开发工具用iPhoneX 375812(第一种情况,高度偏高),一开始fitWidth为true,fitHeight为false时,出来的canvas高宽是 7201559.04,这显然效果不对啊?(我以为是7201280);然后换了fitWidth为false,fitHeight为true,出来的canvas高宽是 5911280 ,这显然也不是要的效果,无论哪种处理都会有超出屏幕外的尺寸,两个都true的话会变形、。。。。。。:joy::sweat_smile::joy::sweat_smile::joy:后来只能放个节点容纳所有内容,通过设置节点高宽来限制了------------------那问题就来了,fitWidth和fitHeight到底是做什么用的呢?后来发现,好像理解的对象不一样,我想的是设计分辨率按比例缩放,官方想的是实际屏幕按比例缩放:fearful:

高宽比例大于自己的设计分辨率,适配宽度,高度等比缩放,宽度填充蛮,但高大于宽,高度会出界。不会留黑边

关键是H5和微信小游戏,明显宽高比是不一样的。其他适配模式也不合适。。。

虽然适配模式命名都差不多,几个引擎适配的结果是有区别的。白鹭这点做得最好,改动最小。COCOS的适配非常不实用,widget对齐也是bug很多

还是得自己再包一层实现等比缩放

:sweat_smile:我意思是缩放的时候为什么不是已设计分辨率尺寸为基准缩放,而是以实际屏幕尺寸为基准缩放,这是出于什么考虑吗

:sweat_smile:虽然我书读的少,但也不要这么瞎说话啊,又不是没用过

实测根本不是文字说的那样,所谓自动缩放Canvas使设计分辨率充满啥啥的,因为以我所学语文知识这句话理解就是在缩放Canvas,那讲道理不就是这个Canvas的高宽比不会变吗,最终应该还是设计分辨率的比例吧,但实际情况并不是,最终的Canvas比例是以实际屏幕尺寸缩放出的结果

系统预设的适配模式为4种:SHOW_ALL,NO_BORDER,FIXED_WIDTH,FIXED_HEIGHT

fitWidth,fitHeight同时勾选时为ShowAll模式
SHOW_ALL模式会尽可能按原始宽高比放大游戏世界以适配Frame,同时使得游戏内容全部可见。

fitWidth,fitHeight均不勾选时为NoNorder模式
NO_BORDER模式会尽可能按原始宽高比放大游戏世界以适配Frame,并且保证不留空白

勾选fitWidth为FIXED_WIDTH模式
FIXED_WIDTH模式会横向放大游戏世界以适应Frame的宽度,纵向按原始宽高比放大

勾线fitHeight为FIXED_HEIGHT模式,类似FIXED_WIDTH

参考文档:多分辨率适配方案

https://github.com/cocos-creator/engine/blob/a4898c5dc742b66eb26e4c1f2c351ca6bbbc71e9/cocos2d/core/components/CCCanvas.js#L235

1赞

我之前的确是描述错了:sweat_smile:,但是这个时候不就是要我们去适配吗。不同分辨率的屏幕是不可避免的,我们能够做的就是去适配,尽量保证不穿帮和不破坏原有UI的美感,保证用户在不同平台上的体验。

https://blog.csdn.net/Mr_JiaTao/article/details/108647637CocosCreator屏幕适配