H5竖屏提示

在做 h5 展示页面的时候 考虑到许多 css 样式在横屏会出现布局错乱, 为防止提示用户横屏显示

demo 介绍

在做 h5 展示页面的时候 考虑到许多 css 样式在横屏会出现布局错乱, 为防止提示用户横屏显示

使用 html5 屏幕旋转事件 onorientationchange 事件;

使用 css3 animation 动画;

html

<div id="tip">
        <i class="icon"></i>
        <p> 为了更好的体验，请使用竖屏浏览 </p>
</div>

css

    *{
        margin: 0;
        padding: 0;
    }

    /* 容器 */

    #tip {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 1);
    }

    /* 手机图片 */

    .icon {
        display: inline-block;
        width: 67px;
        height: 109px;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC");
        transform: rotate(90deg);
        animation: rotation infinite 1.5s ease-in-out;
        background-size: 67px 109px;
        margin-bottom: 2em;
    }

    /* 提示文本 */

    #tip p {
        color: white;
        font-size: 2em;
    }

    /* 手机旋转动画 */

    @keyframes rotation {
        10% {transform: rotate(90deg);
        }
        50% {transform: rotate(0);
        }
        60% {transform: rotate(0);
        }
        90% {transform: rotate(90deg);
        }
        100% {transform: rotate(90deg);
        }
    }

JavaScript

    ;(function screenStatus() {const element = document.querySelector('#tip');
        element.style.visibility = 'hidden';
        const status = "onorientationchange" in window ? "orientationchange" : "resize";
        window.addEventListener(status, e => {if (window.orientation === 180 || window.orientation === 0) {element.style.visibility = 'hidden';}
            if (window.orientation === 90 || window.orientation === -90) {element.style.visibility = 'visible';}
        });
    }());

判断 浏览器是否支持 h5 屏幕旋转事件 onorientationchange, 否则用resize 事件