Phaser3 屏幕适配iPhoneX、iPhoneXS的坑 -- JavaScript Html5 游戏开发

最新推荐文章于 2025-10-07 02:46:50 发布

原创

最新推荐文章于 2025-10-07 02:46:50 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Html游戏 #PhaserJS #Javascript游戏

本文详细介绍了在使用Phaser3进行JavaScript Html5游戏开发时，遇到的屏幕适配iPhoneX、iPhoneXS的问题。特别强调在配置中不应将width设置为window.innerWidth，以防出现适配错误。开发者可以在www.iFIERO.com找到更多游戏开源教学资源。

PhaserJS

坑：
在config内不要把 width 设为 window.innnerWidth
在config内不要把 width 设为 window.innnerWidth
在config内不要把 width 设为 window.innnerWidth

重要的事情得说三遍…

var game;
// once the window loads...
window.onload = function () {
    // 接收 websocket;
    // config of the game;
    var config = {
        type: Phaser.AUTO,
        parent: 'bitgame',
        width: 640, // don't window.innerWidth 
        height: 512,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: {
                    y: 0
                },
                debug: false,
            }
        },
        //*** scenes used by the game
        scene:  [BootScene,PlayGameScene,UIScene]
    }
    game = new Phaser.Game(config);
    // game.scene.add('Boot', BootScene); //*** key,class */
    // game.scene.add('PlayGame', P