横竖屏温馨提示

最新推荐文章于 2023-03-26 23:12:44 发布

Summer_water

最新推荐文章于 2023-03-26 23:12:44 发布

阅读量1.2k

点赞数 1

分类专栏： javascript 文章标签：横竖屏温馨提示

本文链接：https://blog.csdn.net/Summer_water/article/details/72915521

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta name="keywords" content=""/>
    <script>
        !function(){function a(){document.documentElement.style.fontSize=document.documentElement.clientWidth/640*10/16*1000+"%"}var b=null;window.addEventListener("resize",function(){clearTimeout(b);b=setTimeout(a,300)},!1);a()}(window);
    </script>
    <style>
        /*重置样式*/
        body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form{margin:0;}
        body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif;}
        h1,h2,h3,h4,h5,h6{font-size:100%;}
        em,b,i{font-style:normal;}
        a{text-decoration:none;outline:none;}
        img{border:0;}
        ul{list-style:none;}
        button,input,select,textarea{font-size:100%;outline:none;}
        table{border-collapse:collapse;border-spacing:0;}
        td,th,ul,ol{padding:0;}

        /* 横屏提示 */
        @keyframes Shine_landscapeAni { 0% { transform: rotate(-90deg); } 30% { transform: rotate(-90deg); } 70% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
        @-webkit-keyframes Shine_landscapeAni { 0% { transform: rotate(-90deg); } 30% { transform: rotate(-90deg); } 70% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
        .shine_landscape { width: 100%; height: 100%; background: #32373b; position: fixed; left: 0; top: 0; z-index: 99999; display: none; text-align: center; }
        .shine_landscape_box { position: relative; margin-left: auto; margin-right: auto; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
        .shine_landscape img { -webkit-animation: Shine_landscapeAni 1.5s ease infinite alternate; width: auto !important; animation: Shine_landscapeAni 1.5s ease infinite alternate; }
        .shine_landscape span { font-size: 0.42rem; display: block; color: #ffd40a; text-align: center; width: 100%; padding-top: 0.1rem; line-height: 2; }
    </style>
</head>

<body>



<!--横屏提示-->
<div class="shine_landscape" id="Shine_landscape">
    <div class="shine_landscape_box">
        <img src="//ossweb-img.qq.com/images/chanpin/tgclub/public/a20160321hyrzinside/mobile-phone.png">
        <span>为了更好的体验，请将手机/平板横过来</span>
    </div>
</div>

<script type="text/javascript" src="//ossweb-img.qq.com/images/js/zepto/zepto.min.js"></script>

<script>
    var cimi= {
        init: function () {
            //横竖屏提示
            cimi.orientationFun('.shine_landscape');
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
                cimi.orientationFun('.shine_landscape');
            }, false);
        },
        //横屏提示
        orientationFun:function (popobj){
            if (window.orientation === 180 || window.orientation === 0) {
                //竖屏
                $(popobj).show();
            }else if (window.orientation === 90 || window.orientation === -90 ){
                //横屏
                $(popobj).hide();
            }
        }
    };
    cimi.init();
</script>
</body>
</html>

Summer_water

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
横竖屏温馨提示

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <meta name="keywords" content=""/> <script> !function(){function a(){document.documentElement.
复制链接

扫一扫