+
80
-

iframe如何进行不同尺寸设备切换比如手机平板电脑等?

请问iframe如何进行不同尺寸设备切换比如手机平板电脑等?

网友回复

+
0
-

效果如下:

完整代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(['jquery.qrcode.min'], function() {
                $("#div-qcode").qrcode({
                    width: 200,
                    height: 200,
                    text: window.location.href
                });

            });
            $("#desk-view").click(function() {
                $("#priview-inf").removeClass().addClass("desk");
            });
            $("#pad-view").click(function() {
                $("#priview-inf").removeClass().addClass("pad");
            });
            $("#phone-view").click(function() {
                $("#priview-inf").removeClass().addClass("phone");
            });
            $("#qcode-view").hover(function() {
                $("#div-qcode").show();
            }, function() {
                $("#div-qcode").hide();
            });

        });
    </script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }


        #priview-inf {
            height: 100%;
            overflow: visible;
            position: relative;

        }
        .desk {
            width: 100vw;
            height: 100vh!important;
            margin: 0 auto;
            transition: all 0.5s ease 0s;
        }
        .pad {
            height: 960px!important;
            margin: 0 auto;
            padding: 96px 100px 115px 49px;
            width: 785px;
            margin-top: 40px;
            background: url(//repo.bfw.wiki/bfwrepo/image/5e1e76f746aed.png) no-repeat 0 0;
            transition: all 0.5s ease 0s;
        }
        #div-qcode {
            background: white;
            padding: 10px;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 30px;
            left: 80px;
            z-index: 11;
            display: none;
        }
        .phone {
            height: 735px!important;
            margin: 0 auto;
            padding: 102px 25px 159px 23px;
            width: 414px;
            margin-top: 40px;
            background: url(//repo.bfw.wiki/bfwrepo/image/5e1e7690cf0da.png) no-repeat;
            transition: all 0.5s ease 0s;
        }
        iframe {
            padding: 0;
            border: none;
            margin: 0;
            width: 100%;
            height: 100%;
        }


        #device-area {
            height: 30px;
            padding: 0 10px;

        }
        #device-area a {
            margin-right: 7px;
            margin-top: 7px;
            width: 17px;
            height: 16px;
            float: left;
            cursor: pointer;

        }
        #qcode-view {
            background: url("//repo.bfw.wiki/bfwrepo/icon/5da6cfc9b2953.png");
            background-size: cover;
        }
        #desk-view {
            background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat 0px 0
        }
        #pad-view {
            background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -24px 0

        }
        #phone-view {
            background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -71px 0
        }

    </style>
</head>
<body>
    <div id="div-qcode"></div>

    <div id="device-area">
        <a id="desk-view"></a>    <a id="pad-view"></a>  <a id="phone-view"></a>
        <a id="qcode-view"></a>

    </div>
    <div id="priview-inf" class="desk">
        <iframe src="https://www.bfw.wiki"></iframe>
    </div>

</body>
</html>

我知道答案,我要回答