網站內頁新增手機掃碼訪問的方法

大家好，我是小編鵬仔，本次給大家分享一個如何給自己網站頁面新增一個手機掃碼訪問教程。

很多使用者通過電腦訪問了你的網站，可能某些他想手機檢視，那麼剛好用的這個功能，這個鵬仔簡單寫了下，電腦端螢幕大於1198的會顯示二維碼，小於則當做移動端或ipa隱藏不顯示。

本次需要引入jq，如果你的站點未引入jq，請自行引入jq，並下載 qrcode.min.js 引入

DEMO下載iqzhan.com/post/219.html

瀏覽器支援

支援該庫的瀏覽器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

程式碼如下

首先，通過上方，大家應該已經下載了qrcode，我們需要引入，當然，大家也可直接引入鵬仔的也是可以的，如下所示

JavaScript

接著，我們將css程式碼放入你的css檔案，這css鵬仔簡單做了美化效果

CSS

.tp-qrcode{         width: 120px;         height: 140px;         padding: 5px;         box-sizing: border-box;         position: fixed;         top: 30%;         right: 20px;         background: #ffffff;         border-radius: 6px;         box-shadow: 0 0 4px rgba(0,0,0,.35);         text-align: center;         transition: all .3s;         cursor: pointer;     }     .tp-qrcode:hover{         top: 28%;         transition: all .4s;         box-shadow: 0 0 7px rgba(0,0,0,.6);         font-weight: bold;     }     .tp-qrcode span{         color: #a33636;         font-size: 14px;         line-height: 20px;     }     @media screen and (max-width: 1198px){         .tp-qrcode{             display: none;         }     }

放好css，我們再把HTML放到需要顯示的公共地方

Markup

手機掃碼訪問

最後一步，把JS程式碼放到引入的公共JS中即可

JavaScript

var qrcode = new QRCode(document.getElementById("qrcode"), {         text: window.location.href,         width: 110,         height: 110,         colorDark : "rgba(0,0,0,.4)",         colorLight : "#ffffff",         correctLevel : QRCode.CorrectLevel.H     });