手机端强制横屏显示

核心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

转载于:https://www.cnblogs.com/qianduanjingying/p/8522188.html