页面缩放， 相对定位的二维码等比例缩放，始终出现在正确位置

前几天做了一个简单的页面， 如下：

要求： 随着页面缩放二维码的位置要在正确的位置上， 搞了两三个小时， 没搞定， 第二天重新规划结构， 5分钟完成，

已此记下来 这个教训，

<!DOCTYPE html>
<html lang="en">

<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">
    <title>足不出户 安心在线挑保险</title>
    <link rel="icon" href="./favicon.ico">
    <link rel="stylesheet" href="./index.css">
    <style>
        * {
  margin: 0;
  padding: 0;
}

.clearfix:after {
  content: "";
  display: table;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0;
  width: 0;
  clear: both;
}

ul li,
ol li {
  list-style: none;
}

a {
  text-decoration: none;
  outline: 0;
  display: inline-block;
}

* {
  padding: 0;
  margin: 0;
}

input {
  border: 0;
  outline: 0;
}

em,
i {
  font-style: normal;
}

img {
  border: none;
  outline: 0;
}

html {
  font-family: "寰蒋闆呴粦";
  width: 100%;
}

body {
  width: 100%;
  position: relative;
}

.template {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.wrap {
  width: 100%;
  height: auto;

}

.wrap img {
  width: 100%;
  height: 100%;
  display: block;
}

body.PC,
html,
div {
  margin: 0 auto;
  font-size: 0.4rem;
  background: #f5f5f5;
}

.foot {
  width: 100%;
  background: #f5f5f5;
  margin-bottom: 30px;
}

.foot p {
  text-align: center;
  color: #666;
  font-size: 14px;
  line-height: 22px;
}

.foot p span a {
  color: #666;
  cursor: pointer;
}

.foot p a {
  color: #666;
  cursor: pointer;
}

.foot p span a:before {
  content: " ";
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: middle;
  background: url(./images/beian.png) no-repeat;
  background-size: 100%;
}



.box {
  position: relative;
}

#QR {
  position: absolute;
  width: 14%;
  top: 0;
  left: 11.8%;
  z-index: 100;
  margin-top: -19.5%;
}
    </style>
    <script>
        !(function () {
            function a() {
                var html = document.documentElement;
                var w = html.getBoundingClientRect().width;
                if (w > 750) {
                    w = 750;
                }
                var f = w / 7.5;
                html.style.fontSize = f + "px";
            }
            a();
            var timer;
            window.onresize = function () {
                clearTimeout(timer);
                timer = setTimeout(a, 300);
            }
        })();
    </script>
</head>

<body>
    <div class="template">
        <div class="wrap">
            <img src="./images/banner.png" alt="美华保险">
        </div>
        <div class="box">
            <img src="" alt="" id="QR">
        </div>
        <div class="foot">
            <p>美华保险销售有限公司</p>
            <p>备案证书号:
                <span> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011202013874"
                        target="_bank">沪公网安备 31011202013874号</a> </span>
            </p>
            <p> <a href="https://beian.miit.gov.cn/#/Integrated/index">沪ICP备17036366号-3 </a></p>
        </div>
    </div>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        (function () {
            function GetRequest() {
                var url = location.search; //获取url中"?"符后的字串  
                console.log(url)
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                console.log(theRequest)
                return theRequest;
            }
            var option = GetRequest()


            $.ajax({
                url: 'https://insure.meihualife.com/articlebak/getZhiHuArticleQrCode.do',
                type: 'post',
                data: {
                    articletype: option.articletype,
                    articleurl: option.articleurl,
                    position: option.position,
                    sourcetype: option.sourcetype,
                    sourcedetail: option.sourcedetail,
                    code: ''
                    // articletype: "01",
                    // articleurl: "https://zhuanlan.zhihu.com/p/548018095",
                    // position: "1",
                    // sourcetype: "pc",
                    // code: ''
                    // articletitle: options.articletitle,
                },
                success: function (res) {
                    console.log(JSON.parse(res).qrcode);
                    // console.log(res.qrcode);
                    // console.log(JSON.parse(res.qrcode));
                    $("#QR").attr("src", JSON.parse(res).qrcode)
                }
            });

            if (isMobile()) {
                window.location.href = `https://insure.meihualife.com/mh0002/zhihu/QRCode07/index.html?articletype=${option.articletype}&articleurl=${option.articleurl}&position=${option.position}&sourcetype=${option.sourcetype}&sourcedetail=${option.sourcedetail}&code=''`
            } else {

            }

            function isMobile() {
                let flag = navigator.userAgent.match(
                    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                )
                return flag;
            }

        }())
    </script>

    <!-- https://insure.meihualife.com/articlebak/getZhiHuArticleQrCode.do?articletype=01&articleurl=https://zhuanlan.zhihu.com/p/548018095&position=1&sourcetype=pc -->


</body>

</html>

 

posted @ 2022-10-17 10:45  信仰风声  阅读(105)  评论(0)    收藏  举报