C2在移动端是无法锁屏的,所以当有横屏需求的时候就很麻烦,尤其是微信环境下,通常都是竖屏开启项目的,当用户看到屏幕尺寸不对再手动横屏的体验很不好。
解决这个问题需要用到Browser插件以及C2自带的旋转画布的功能。
Browser插件可以检测到手机的横竖屏状态,我们可以根据状态旋转layout
具体实现方法:
1 检查工程的windows尺寸,例如一般微信下横屏屏幕为1280*590,记录下这组数值,用于修改屏幕尺寸
2 添加Browser插件
3 添加事件:
//当检测到为竖屏的时候,将canvas的宽高颠倒过来,设置layout的角度为-90
Browser - IsPortrait - System - Set canvas size to 590*1280 System - Set layout angle to -90 System - Else Browser - IsLandscape - System - Set canvas size to 1280*590 System - Set layout angle to 0
4 这个时候测试效果,会发现横屏的时候,竖屏的时候位置不对,这是因为画面超过了layout的size。只需要在layout的设置里,将Unbounded scrolling选项改为Yes即可
5 继续测试,会发现当Go to另一个layout的时候,竖屏画面也会出现问题,这是因为初始化layout的时候检测到竖屏尺寸不匹配产生的问题。只需要在Go to Layout之前,在On end of layout事件里将canvas和angle重新设置回默认即可