移动端默认横屏显示

因为有一个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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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.CHENGdiv>
<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>

你可能感兴趣的:(jquery)