微信小程式H5預覽頁面框架（二維碼不隱藏）
阿新 • • 發佈：2018-11-23
<!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: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", 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; color: #717375; 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>