iframe mobile template is borderless and embedded in h5 page, similar to mobile ui library

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        iframe {

            border-top-width: 0px;

            border-bottom-width: 0px;

            border-left-width: 0px;

            border-right-width: 0px;

            width: 310px;

            height: 590.87024px;

        }

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 296px;

            height: 690.87024px;

            overflow: hidden;

        }

        .phone-model {

            font-size: 16px;

            background-color: #fff;

            width: 330px;

            position: fixed;

            left: 50%;

            top: 10px;

            z-index: 10;

            margin: 0;

            overflow: hidden;

            box-sizing: border-box;

            overflow-y: auto;

            background-image: url(https://v1.uviewui.com/common/iPhoneX_model.png);

            background-repeat: no-repeat;

            background-size: 100%;

            border-radius: 30px;

            padding: 48px 23px 38px 16px;

        }

    </style>

</head>

<body>

    <div class="phone-model">

        <div class="box">

            <iframe scrolling="auto" src="https://h5.uviewui.com/#/"></iframe>

        </div>

    </div>

</body>

</html>

 

Guess you like

Origin blog.csdn.net/SAXX2/article/details/132431916