本文是在我开发过程中遇到的问题，creator版本2.09，平台为web mobile，web pc平台同样适用，原生平台可以借鉴。本文不涉及刘海屏适配相关。
最近负责一款小型web游戏，产品的要求是能在pc浏览器、手机浏览器、移动平台web view上都能运行，这其实没什么大不了的，开发玩发布为web mobile平台就能到，但产品还要要求横竖屏适配、在游戏运行过程中横竖屏旋转也不影响游戏体验就很麻烦了。
横竖屏适配参考文档https://docs.cocos.com/creator/manual/zh/ui/multi-resolution.html?h=%E9%80%82%E9%85%8D，比较设计尺寸和实际尺寸的宽高比设置适配高度和宽度就能搞定
let canvas = this.getComponent(cc.Canvas);
let size = cc.winSize;
if(canvas.designResolution.width/canvas.designResolution.height < size.width/size.height) {
canvas.fitHeight = true;
canvas.fitWidth = false;
} else {
canvas.fitHeight = false;
canvas.fitWidth = true;
}
这里写的跟文档刚好相反，产品要求游戏内容全显示，黑边问题不考虑。但这样做在手机上做横竖屏切换时，手机内容并没有适配回来，时间有限先直接说方法
场景中的Canvas组件 fitHeight和fitWidth全勾选，在适配脚本中加入该方法
let size = cc.winSize;
let isPortrait = size.height > size.width;
cc.view.setResizeCallback(()=>{
isPortrait = !isPortrait
// console.log(“转屏了,是竖屏吗：”,isPortrait)
if (isPortrait) {
// console.log(‘设置为竖屏’)
cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT)
} else {
cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE)
// console.log(‘设置为横屏’)
}
})