之前都是生成一个打的二维码,img的宽高为100%,然后图片自适应缩小到需要的宽高。但是在全面屏手机出现bug,img宽高不在自适应100%。
于是只能写死宽高了。
qrcode参考资料:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>我的</title>
<script src="./js/adapt.js"></script>
<link rel="stylesheet" href="./css/common.css">
</head>
<style>
.top{
position: relative;
height: 10rem;
background: #eee;
}
#code_id{
position: absolute;
top:3rem;
right:5rem;
width:4rem;height: 4rem;
background: #fff;
}
#code_id img{
width:100% !important;
height: 100% !important;
}
</style>
<body>
<div class="top">
<div id="code_id"></div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/qrcode.min.js"></script>
<script>
$(function(){
var width1 = document.body.offsetWidth/18.75*4;
var userHtml = "fklajflkasdfjljfasldk"
var qrcode = new QRCode(document.getElementById("code_id"), {
text: "http://www.runoob.com",
width: width1,
height: width1,
});
})
</script>
</body>
</html>
var qrcode = new QRCode("test", {
text: "http://www.runoob.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码