<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=no'>
    <title>当前页面丢失了</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family:"Helvetica Neue",Roboto,"Segoe UI",sans-serif;
        }
        #container{
            background: url("https://img1.cdh5.cn/e_404/Advertisement1/image/end.png")no-repeat center;
            background-size: 100% 100%;
            position: absolute;
            top:0;
            left:0;
            color: #ffffff;
            text-align: center;
        }
        .ew{
            position: absolute;
            width: 26.3%;
            height: 18%;
            left: 37%;
            top: 54%;
            z-index: 5;
        }
        .link{
            position: absolute;
            background: url('https://img1.cdh5.cn/e_404/Advertisement1/image/link.png')no-repeat center;
            background-size: 100% 100%;
            width: 100%;
            height: 11%;
            left: 0;
            bottom: 0;
            z-index: 5;
        }
        .link a{
            display: block;
            width: 100%;
            height: 100%;
        }
       /* .close:focus{
            border: 0;
            outline: none;
        }*/
        .title{
            position: absolute;
            top: 35.7%;
            width:100%;
            color: white;
            font-size: 0.4749rem;
        }
        p{
            position: absolute;
            top:30%;
            width:100%;
            color: white;
            font-size:0.28rem;
        }
        .p1{
            top: 42%;
        }
        .p2{
            top: 45.5%;
        }
    </style>
</head>
<body>
    <div id="container">
        <h3 class="title">当前页面丢失了，<br>请从正确链接进入！</h3>
        <!--<p class="p1">长按关注下方微信公众号</p>-->
    </div>
</body>
<script>
    var orientation= 0,brWidth,brHeight,scale,pyNum,container, w,ml;
    (function () {
        var innerWidthTmp = window.innerWidth;
        scale= 1;
        pyNum= 0;
        function rotation(){
            brWidth = document.documentElement.clientWidth;
            brHeight = document.documentElement.clientHeight;
            if(brWidth<brHeight){
                if(!getCookie("brHeight")){
                    setCokkie("brHeight",brHeight,1);
                }
                if(getCookie("brHeight")!=brHeight){
                    brHeight=getCookie("brHeight");
                }
            }
            scale=brHeight/1280;
            w=870*scale;
            container = document.getElementById("container");
            container.style.width=w+'px';
            container.style.height=brHeight+'px';
            container.style.marginLeft = (brWidth-w)/2+"px";
            pyNum=(brWidth-w)/2;
            container.style.display="block";
        }
        rotation();
//转屏事件，内部功能可以自定义
        function screenOrientationEvent(e){
            if(orientation == 0){
                rotation();setRem();
            } else{
                rotation(); setRem();
            }
        }
//横竖屏事件监听方法
        function screenOrientationListener(){
            try{
                var iw = window.innerWidth;
                //屏幕方向改变处理
                if(iw != innerWidthTmp){
                    if(iw>window.innerHeight)orientation = 90;
                    else orientation = 0;
                    //调用转屏事件
                    screenOrientationEvent();
                    innerWidthTmp = iw;
                }
            } catch(e){alert(e);}
            //间隔固定事件检查是否转屏，默认500毫秒
            setTimeout(screenOrientationListener,500);
        }
//启动横竖屏事件监听
        screenOrientationListener();
        /*********************font-size(Rem)根节点的字号重置*********************************/
        var docEl = document.documentElement;
        var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';
        var setRem = function () {
            var screenWidth = w || w || 360;
            // 760 PSD宽度(可变的)
            docEl.style.fontSize = (100 * screenWidth / 870) + 'px';
        };
        window.addEventListener('resize', setRem, false);
        setRem();
        /**
         *
         * @desc 根据name读取cookie
         * @param  {String} name
         * @return {String}
         */
        function getCookie(name) {
            var arr = document.cookie.replace(/\s/g, "").split(';');
            for ( var i = 0; i < arr.length; i++) {
                var tempArr = arr[i].split('=');
                if (tempArr[0] == name) {
                    return decodeURIComponent(tempArr[1]);
                }
            }
            return '';
        }
        /**
         *
         * @desc  设置Cookie
         * @param {String} name
         * @param {String} value
         * @param {Number} days
         */
        function setCokkie(name,value,days){
            var date=new Date();
            date.setDate(date.getDate()+days);
            document.cookie = name + '=' + value + ';expires=' + date;
        }

        /**
         *
         * @desc 根据name删除cookie
         * @param  {String} name
         */
        function removeCookie(name){
            //设置已过期，系统立刻删除cookie
            setCokkie(name,'1',-1);
        }
    })();

</script>
</html>