一、遇到的問題：

---

?正常瀏覽網頁，二維碼正常顯示，但是隨著瀏覽器的擴大與縮小，二維碼尺寸不會隨著屏幕自適應? ? ? ? ? ? ? ? ? ??

正常瀏覽（截取部分）：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

縮小瀏覽器（截取部分）：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

?

二、解決辦法：

---

1、了解qrcanvas-vue插件，https://gera2ld.github.io/qrcanvas-vue/#logo。只支持像素大小的二維碼2、qrcode支持移動端自定義大小二維碼 "qrcode": "^1.2.2", import QRCode from 'qrcode';<canvas class="qrcode"></canvas> _this.urlData為請求過來的url地址渲染： var canvas = document.querySelector('canvas') QRCode.toCanvas(canvas, this.urlData) css:生成二維碼之后在canvas標簽里有style樣式（單位為px），!important的層級比style要高，實現自定義大小 .qrcode {width: 90% !important;height: 90% !important;}

三、效果：

---

正常瀏覽（截取部分）：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

縮小瀏覽器（截取部分）：大小跟隨著屏幕變大變小? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

總結

以上是生活随笔為你收集整理的如何让二维码自适应浏览器的尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。