A base implementation of properly handling viewport resize and rotation in PIXI.js (including retina support).

pixiRetinaResize.js

/**
 * The width and height to which our graphic assets are designed for 
 * Keep in mind retina resolutions and remember to provide 2xWidth 2xHeight assets for them
 */
var targetWidth = 1024;
var targetHeight = 768;

/**
 *  The main (root) container on the stage
 *  You should always have a master container on your stage
 *  it helps to do all kinds of cool stuff
 */
var scene = new PIXI.DisplayObjectContainer();
 
/**
 * Add listeners for canvas scaling with window resizing and device rotation
 */
var resize = function () {
        window.addEventListener('resize', rendererResize);
        window.addEventListener('deviceOrientation', rendererResize);
};

/**
 * Calculate the current window size and set the canvas renderer size accordingly
 */
var rendererResize = function () {
    var width = window.innerWidth,
        height = window.innerHeight,
        targetScale;

    /**
     * Set the canvas size and display size
     * This way we can support retina graphics and make our game really crisp
     */
    canvas.width = width * window.devicePixelRatio;
    canvas.height = height * window.devicePixelRatio;
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';

    /**
     * Resize the PIXI renderer
     * Let PIXI know that we changed the size of the viewport
     */
    renderer().resize(canvas.width, canvas.height);

    /**
     * Scale the canvas horizontally and vertically keeping in mind the screen estate we have
     * at our disposal. This keeps the relative game dimensions in place.
     */
     if (height / targetHeight < width / targetWidth) {
         scene.scale.x = scene.scale.y = height / targetHeight;
     } else {
         scene.scale.x = scene.scale.y = width / targetWidth;
     }

    /**
     * Some sugar
     * Set the x horizontal center point of the canvas after resizing.
     * This should be used for engines which calculate object position from anchor 0.5/0.5
     */
    scene.pivot.y = -(width * (1 / scene.scale.y) / 2) * window.devicePixelRatio;
    scene.pivot.x = -(width * (1 / scene.scale.x) / 2) * window.devicePixelRatio;

    /**
     * iOS likes to scroll when rotating - fix that 
     */
    window.scrollTo(0, 0);
};


// After the renderer and scene are initialized just call
resize();

/**
 * P.s. it's best to keep the resize handler as a Singleton
 * this way you can provide external methods for property retrival
 * and hook some nice callbacks into the system,
 * for example a "please rotate me" message.
 */

I implemented other scale modes (same as Flash AS3), I'm publishing them in case someone will need them.

switch (scaleMode) {
case ScaleMode.exactFit:
    scene.scale.x = screenWidth / sceneWidth;
    scene.scale.y = screenHeight / sceneHeight;
    break;
case ScaleMode.noBorder:
    scene.scale.x = (screenHeight / sceneHeight < screenWidth / sceneWidth) ? (screenWidth / sceneWidth) : (screenHeight / sceneHeight);
    scene.scale.y = scene.scale.x;
    break;
case ScaleMode.noScale:
    scene.scale.x = 1;
    scene.scale.y = 1;
    break;
case ScaleMode.showAll:
    scene.scale.x = (screenHeight / sceneHeight < screenWidth / sceneWidth) ? (screenHeight / sceneHeight) : (screenWidth / sceneWidth);
    scene.scale.y = scene.scale.x;
    break;
}

scene.x = (screenWidth - sceneWidth * scene.scale.x) * .5;
scene.y = (screenHeight - sceneHeight * scene.scale.y) * .5;