BIGEMPA Js API示例中心
手機頁面展示源代碼展示

代碼編輯區(qū) 運行下載還原
<!DOCTYPE html>
<html>

<head>
<script src="http://www.xawiki.com/Public/common/js/jquery.min.js"></script>
    <style type="text/css">
        input {
            width: 90px;
            height: 32px;
        }

        #showMobilePreview {
            z-index: 9999;
            width: 400px;
            height: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            opacity: 1;
            text-align: center;
        }

        .mobile_preview_header {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 53px;
            width: 387px;
            background: #eeeff2;
            text-align: center;
            line-height: 40px;
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
        }
        }

        .mobile_preview_header_icon {
            display: inline-block;
            width: 65px;
            height: 10px;
            background: #c8c9cc;
            border-radius: 9px;
            vertical-align: middle;
            margin-top: 18px;
        }

        .mobile_preview_frame {
            width: 375px;
            min-height: 309px;
            /*height: 729px;*/
            max-height: calc(100vh - 72px);
            top: 33px;
            left: 0;
            border: 6px solid #eeeff2;
            position: relative;
            background-color: #fff;
            display: block;
            overflow: hidden;
        }

        #YuFrameMobilePreview {
            border: none;
            width: 375px;
            height: 100%;
        }

        .mobile_preview_footer {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 52px;
            width: 387px;
            background: #eeeff2;
            text-align: center;
            line-height: 45px;
            border-bottom-right-radius: 50px;
            border-bottom-left-radius: 50px;
        }

        .mobile_preview_footer_icon {
            display: inline-block;
            width: 43px;
            height: 43px;
            background: #c8c9cc;
            border-radius: 50%;
            vertical-align: middle;
        }
    </style>

</head>

<body>
    <!-- 手機訪問https://ok.zhangwei.fun/phone.html -->
    <!-- <iframe src="" frameborder="0"></iframe> -->
    <div id='showMobilePreview'>
        <div class='mobile_preview_header'><i class='mobile_preview_header_icon'></i></div>
        ? ? ?? ??? <div class='mobile_preview_frame'><iframe id='YuFrameMobilePreview' name='YuFrameMobilePreview'
                src="https://ok.zhangwei.fun/phone.html"></iframe>
        </div>
        ? ? ?? ??? ?<div class='mobile_preview_footer'><i class='mobile_preview_footer_icon'></i></div>
    </div>
</body>
<html>