js实现不同设备尺寸切换显示iframe效果代码-html代码-BFW代码库

js实现不同设备尺寸切换显示iframe效果代码

代码语言：html

所属分类：其他

代码描述：js实现不同设备尺寸切换显示iframe效果代码，包含手机、平板、电脑

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                height: 100%;
            }
            .facility {
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
            }
            ul {
                font-size: 0;
                text-align: center;
                background-color: #f3f4f6;
            }
            li {
                display: inline-block;
                padding: 20px;
                line-height: 29px;
                font-size: 14px;
                vertical-align: top;
                cursor: pointer;
            }
            li:first-child {
                padding: 20px 0;
            }
            svg {
                vertical-align: top;
            }
            .wrap {
                width: 1536px;
                margin-left: auto;
                margin-right: auto;
                height: 100%;
                height: calc(100% - 70px);
                padding-top: 70px;
            }
            iframe {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="facility">
            <ul>
                <li>按不同尺寸查看：</li>
                <li>
                    <svg
                        width="8.57142857142857"
                        height="24"
                        viewBox="0 0 10 28"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 8.5 28h-7A1.5 1.5 0 0 1 0 26.5v-13A1.5 1.5 0 0 1 1.5 12zM1 15v10h8V15H1zm4 12.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM4 13v1h2v-1H4z"
                            fill-rule="evenodd"
                        ></path>
                    </svg>
                </li>
                <li>
                    <svg
                        width="11.999999999999998"
                        height="24"
                        viewBox="0 0 14 28"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M1.5 6h11A1.5 1.5 0 0 1 14 7.5v19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 26.5v-19A1.5 1.5 0 0 1 1.5 6zM1 9v16h12V9H1zm6 18.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM7 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"
                            fill-rule="evenodd"
                        ></path>
                    </svg>
                </li>
                <li>
  .........完整代码请登录后点击上方下载按钮下载查看