移动端游戏页面横屏显示问题

Question

最近因为工作需要，所以在制作一个移动端2D游戏。因为是横版游戏，且和微信公众号联系，所以需要强制横屏，以下为强制横屏代码：

  window.onload = function () {

        if(window.orientation==180||window.orientation==0) {

            document.body.style.width = window.innerHeight;

            document.body.style.height = window.innerWidth;

            document.body.style.transform = 'rotate(90deg)';

        } else{

            document.body.style.transform = 'rotate(0)';

        }

    }

但是在强制横屏后，界面宽高出现问题，分辨率也有问题。如下图：

在电脑端显示正常，如下：

为了测试，所以只渲染了一张图。

以下是用pixi.js写的舞台及渲染器：

 var stage = new Container(),

        renderer = new autoDectectRenderer(width, height);

    document.body.appendChild(renderer.view);

    

直接是用窗口的大小来设置的。然后强制横屏是在参数初始化之前，也尝试了再次初始化，一样不行。希望大神们不吝指教。

Answer 1

直接判断屏幕宽高可以了，width>height就是手机已经横屏，不需要旋转bodywidth<height手机没有横屏，旋转body