微信小程序H5预览页面框架

Posted 2021-01-22 周十发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序H5预览页面框架相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--解决iphone横屏默认放大字体-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>互联网家装扮小程序预览页</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        html {
            /*不想让iPhone横坚屏切换的时候调节文字*/
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            line-height: 1.6;
        }

        body {
            /*触摸禁止显示默认菜单*/
            -webkit-touch-callout: none;
            font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
            letter-spacing: .034em;
            background: #fff;
        }

        .content_inner {
            /*允许常单词换行到下一行*/
            word-break: break-word;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
            hyphens: auto;
        }

        .area_inner {
            padding: 20px 16px 12px;
            background-color: #fafafa;
        }

        /*居中最大宽度*/
        .primary_area_content_inner {
            max-width: 375px;
            margin-left: auto;
            margin-right: auto;
        }

        .area_content_inner {
            text-align: center;
        }

        .qr_code_inner {
            display: none!important;
            position: fixed;
            left: 0;
            right: 0;
            top: 20px;
            text-align: center;
        }

        @media screen and (min-width: 780px) {
            .qr_code_inner {
                display: block !important;
                top: 20px
            }
        }

        .qr_code_pc_inner {
            position: relative;
            width: 500px;
            margin-left: auto;
            margin-right: auto
        }

        .qr_code {
            position: absolute;
            right: -120px;
            top: 0;
            width: 140px;
            padding: 16px;
            border: 1px solid #d9dadc;
            background-color: #fff;
            word-wrap: break-word;
            word-break: break-all;
        }

        .qr_code p {
            font-size: 14px;
            line-height: 20px;
        }

        .qr_code_pc_img {
            width: 102px;
            height: 102px;
        }
    </style>
</head>
<body>
<div class="content_inner">
    <div class="area_inner">
        <!--预览区-->
        <div class="primary_area_content_inner">
            <div class="area_content_inner">
                <img src="./image/iphone.png">
                <img src="./image/iphone.png">
                <img src="./image/iphone.png">
            </div>
        </div>
    </div>
    <!--二维码-->
    <div class="qr_code_inner">
        <div class="qr_code_pc_inner">
            <div class="qr_code">
                <img src="./image/iphone.png" class="qr_code_pc_img">
                <p>手机微信"扫一扫"<br>立即体验小程序</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

以上是关于微信小程序H5预览页面框架的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序web-view ，嵌入H5页面