https://www.jianshu.com/p/738a8f6a2ec1
···
// https://blog.csdn.net/a18339063397/article/details/81482073
// https://blog.csdn.net/myflyingangel2016/article/details/84960164
// 手机型号 尺寸(对角线) 物理点 宽长比例 像素点 倍数 状态栏高度 底部安全距离 导航栏高度 tabbar高度
// iPhone 4/4S 3.5英寸 320x480 0.667 640x960 @2x 20 - 44 49
// iPhone 5/5S/5C 4英寸 320x568 0.563 640x1136 @2x 20 - 44 49
// iPhone SE 4英寸 320x568 0.563 640x1136 @2x 20 - 44 49
// iPhone 6 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
// iPhone 6 Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
// iPhone 6S 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
// iPhone 6S Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
// iPhone 7 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
// iPhone 7 Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
// iPhone 8 4.7英寸 375x667 0.562 750x1334 @2x 20 - 44 49
// iPhone 8 Plus 5.5英寸 414x736 0.563 1242x2208 @3x 20 - 44 49
// iPhone X 5.8英寸 375x812 0.462 1125x2436 @3x 44 34 44 83
// iPhone XS 5.8英寸 375x812 0.462 1125x2436 @3x 44 34 44 83
// iPhone XS Max 6.5英寸 414x896 0.462 1242x2688 @3x 44 34 44 83
// iPhone XR 6.1英寸 414x896 0.462 828x1792 @2x 44 34 44 83
// iPhone 11 6.1英寸 414x896 0.462 828x1792 @2x 44 34 44 83
// iPhone 11 Pro 5.8英寸 375x812 0.462 1125x2436 @3x 44 34 44 83
// iPhone 11 Pro Max 6.5英寸 414x896 0.462 1242x2688 @3x 44 34 44 83
// 机型 屏幕宽高比
// iPhone 5 320÷568=0.563
// iPhone 6 375÷667=0.562
// iPhone 6 Plus 414÷736=0.5625
// https://www.cnblogs.com/billyrun/articles/8082415.html
// 其次是cc.game.frame , cc.game.container , cc.game.canvas,这三个属性都是dom节点,对应上图1,2,3
// cc.game.frame是整个页面,如图是被嵌套在iframe中的这个游戏子页面
// CCView中计算页面大小/是否转屏都是由cc.game.frame.clientHeight/clientWidth获取页面大小
// (window.innerWidth/innerHeight其实与之对应是相同的)
// cc.view._frameSize/cc.view.getFrameSize()记录的就是这个大小
// cc.game.container是包装游戏的容器
// 转屏时候该容器会改变css强转90度
// cc.game.canvas是游戏内容渲染容器
// SHOW_ALL模式下可能会比页面窗口小
// 定宽定高等其余情况,canvas会与页面窗口一样大
let c = this.node.getComponent(cc.Canvas)
let domCanvas = document.getElementById("GameCanvas")
// 设计分辨率比
let _rateR = 414 / 736
// 显示分辨率比
let _rateV = document.body.clientHeight / document.body.clientWidth
let _rateV = cc.game.frame.clientHeight / cc.game.frame.clientWidth
// let _rateR = 0.5;
if (_rateV >= 0.5) {
this.fix = _rateV / _rateR
// this.node.setContentSize(document.body.clientWidth, document.body.clientHeight)
c.designResolution = new cc.Size(736/this.fix, 414);
// domCanvas.width = domCanvas.width * this.fix
}
else {
this.fixX = (cc.winSize.width - this.node.getContentSize().width)/2
// domCanvas.style.width = document.body.clientHeight / _rateR + "px"
// domCanvas.width = domCanvas.height / _rateR
}
cc.log(this.fix)
cc.log(this.fixX)
cc.log(cc.winSize.width)
// cc.log(cc.game.frame.clientWidth)
cc.log(this.node.getContentSize().width)
···
网友评论