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

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就是手机已经横屏，不需要旋转body
width<height手机没有横屏，旋转body

Answer 2

不是有个window.onorientationchange么？在这个函数下控制屏幕方向。