移动端默认横屏显示

来源：互联网发布：特别好的句子知乎编辑：程序博客网时间：2024/05/17 17:41

因为有一个H5页需要横屏，在网上找了找资料，有说通过HTML5 API的，有说不能强制的，所以我就自己优化了一下；
代码中使用了jquery的语法设置，所以需要网页中加载；

还有几点需要优化：
1、横屏的时候禁止上向刷新；

限制

测试后，发现在微信，QQ，钉钉中都不能横屏，这是因为APP中限制了，需要打开横屏功能；
1、微信不能横屏，只能用户手动打开，参考：
http://jingyan.baidu.com/article/19020a0a38c36d529c284263.html

看来横屏这功能想用还是有各种困难啊。回头再研究一下！

主要代码如下：

/*强制横屏*/            function oScreen(className) {                this.className = className;                var That = this;                this.conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;                this.conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;                console.log('conH:'+this.conH+'conW:'+this.conW)                var evt = "onorientationchange" in window ? "orientationchange" : "resize";                window.addEventListener(evt, function() {                    var orientation = window.orientation;                    switch (orientation){                        case 90:                        case -90:                            orientation = '横'; //这里是横屏,可以console.log()打印出来，可以删除                            That.vertical(className);                            break;                        default:                            orientation = '竖'; //这里是竖屏                            That.vertical(className);                            break;                    }                })            }            oScreen.prototype.horizontals = function (className) {                var That = this;                $(className).css({                    "transform": "rotate(90deg) translate(" + ((That.conH - That.conW) / 2) + "px," + ((That.conH - That.conW) / 2) + "px)",                     "-webkit-transform": "rotate(90deg) translate(" + ((That.conH - That.conW) / 2) + "px," + ((That.conH - That.conW) / 2) + "px)",                    "width": That.conH + "px",                    "height": That.conW + "px",                    "transform-origin": "center center",                    "-webkit-transform-origin": "center center"                });            }            oScreen.prototype.vertical = function (className) {                var That = this;                $(className).css({                    "transform": "none",                    "-webkit-transform": "none",                    "width": "auto",                    "height": "auto",                    "transform-origin": "center center",                    "-webkit-transform-origin": "center center"                });            };            var imgList = new oScreen('.img-list');//创建对象，把你的类或者ID传进去；            imgList.horizontals('.img-list');//网页加载的时候就通过CSS3的transform旋转90度；

以下为完整的DEMO

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport"          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"></head><body><div class="demo">HELLO！MR.CHENG</div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="http://s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script><script>    /*强制横屏*/    function oScreen(className) {        this.className = className;        this.conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;        this.conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;        var evt = "onorientationchange" in window ? "orientationchange" : "resize";        window.addEventListener(evt, function() {            var orientation = window.orientation;            switch (orientation){                case 90:                case -90:                    orientation = '横'; //这里是横屏                    demo.vertical(className);                    break;                default:                    orientation = '竖'; //这里是竖屏                    demo.vertical(className);                    break;            }        })    }    oScreen.prototype.horizontals = function (className) {        var That = this;        console.log('横')        $(className).css({            "transform": "rotate(90deg) translate(" + ((That.conH - That.conW) / 2) + "px," + ((That.conH - That.conW) / 2) + "px)",            "-webkit-transform": "rotate(90deg) translate(" + ((That.conH - That.conW) / 2) + "px," + ((That.conH - That.conW) / 2) + "px)",            "width": That.conH + "px",            "height": That.conW + "px",            //"margin-top":iosTopHe+"px",            "transform-origin": "center center",            "-webkit-transform-origin": "center center"        });    }    oScreen.prototype.vertical = function (className) {        var That = this;        console.log('竖')        $(className).css({            "transform": "none",            "-webkit-transform": "none",            "width": "auto",            "height": "auto",            //"margin-top":iosTopHe+"px",            "transform-origin": "center center",            "-webkit-transform-origin": "center center"        });    };    var demo = new oScreen('.demo');    demo.horizontals('.demo');</script></body></html>

阅读全文

1 0