Vmo8 Wiki

Vmo8 用户的地盘, C2/C3开发者的乐园

用户工具

站点工具


技巧_移动端锁定屏幕方向解决方案

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

技巧_移动端锁定屏幕方向解决方案 [2018/01/19 15:12] (当前版本)
114.250.180.241 创建
行 1: 行 1:
 +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重新设置回默认即可
 +
 +{{::moblie_portrait.png?400|}}
技巧_移动端锁定屏幕方向解决方案.txt · 最后更改: 2018/01/19 15:12 由 114.250.180.241