<!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- 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>