PixiJs系列实战课程- 基础篇-03解决移动端适配

基础篇

第三章 解决移动端适配

这一章解决横竖屏保持横排显示的方案，打开vscode，启动项目走起。

第一步，打开resources.js，找到如下代码

let app = new PIXI.Application({width: 1344, height: 750});

在这句的上面加入动态获取屏幕可视区域的宽度和高度

const w = document.body.clientWidth,   // 或者  window.innerWidth
          h = document.body.clientHeight;  // 或者  window.innerHeight
let app = new PIXI.Application({width: w, height: h});

第二步，打开index.js，输入如下代码

这句话意思是手机如果横竖屏调换位置的话会自动刷新页面，为了让适配的js再次生效

//判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            //竖屏状态
            location.reload();
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            //横屏状态
            location.reload();
        }
}, false);

第三步，打开resources.js，找到如下代码

loader.once('complete', function(target, resource) {  //加载完成
    document.body.appendChild(app.view)
    
    //初始化场景
      initScenes();
    //初始化精灵
     initSprites();
    //初始化动画
     initAnimation();
     ！！！！【在这里添加下面的代码】！！！
}
loader.load();  // 开始加载资源

这句话就是先判断宽还是高是最小值，用最小值除以750（设计稿的宽度），得到缩放比，然后用缩放比方法舞台，并且判断如果宽度小于高度的话就是横屏，然后旋转1.57，并且设置舞台里旋转的中心为0.5，然后设置舞台的x轴就是宽度

 let min = (w<h)?w:h;
let scale = min/750;  // 根据设计稿尺寸进行缩放比例调整
console.log(w,h,min,"放大系数：",scale);
        
 app.stage.scale.set(scale,scale);  // 根据屏幕实际宽高放大舞台
if (w<h) {   // 根据横屏竖屏效果旋转舞台
    app.stage.rotation = 1.57;
    app.stage.pivot.set(0.5);
    app.stage.x = w;
}else {
   
}

结语

第三章结束，下一章我们来解决滑动如何控制时间轴的问题。