When making h5 display page, consider that many css styles will appear in the horizontal screen layout disorder, in order to prevent prompting users to display on the horizontal screen

demo introduction

When making h5 display page, consider that many css styles will appear in the horizontal screen layout disorder, in order to prevent prompting users to display on the horizontal screen

Rotate the event onorientation change using the HTML 5 screen;

Use css3 animation animation;

html

<div id="tip">
        <i class="icon"></i>
        <p> For a better experience, use vertical screen browsing</p>
</div>

css

    *{
        margin: 0;
        padding: 0;
    }

    /* container */

    #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);
    }

    /* Cell phone pictures */

    .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;
    }

    /* Prompt text */

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

    /* Mobile Rotary Animation */

    @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';
            }
        });
    }());

Determine whether the browser supports the h5 screen rotation event onorientation change or resize event