手機端強制橫屏顯示

核心js代碼：

// 強制橫屏顯示。事件須要在此處從新綁定，綁定的swipeLeft之類的方向會錯誤，須要從新綁定。
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    window.addEventListener(resizeEvt, orientationHandler, false);
    window.addEventListener('DOMContentLoaded', orientationHandler, false);
    var $con = $(".container");
    var con = $con[0];

    function orientationHandler() {
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        if (windowWidth < windowHeight) {
            con.style.width = windowHeight+ 'px';
            con.style.height = windowWidth+ 'px';
            con.style.webkitTransform = con.style.transform =  "rotateZ(90deg) translate3d(0,-" + windowWidth + "px,0)";
        } else {
            con.style.width = '100%';
            con.style.height = '100%';
            con.style.webkitTransform = con.style.transform =  "rotateZ(0deg) translate3d(0,0,0)";
        }
    }
    // 強制橫屏顯示。事件須要在此處從新綁定，綁定的swipeLeft之類的方向會錯誤，須要從新綁定。

核心css代碼：

.container {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

參考：

http://pvp.qq.com/act/a20160922V15/test.htm

http://pvp.qq.com/act/a20160922V15/test2.htm