移動端二維碼彈出框,自適應螢幕尺寸

標籤：des   style   blog   http   color   io   os   使用   ar   

     qrcode box，一個小小的二維碼工具，通過調用它，可以在頁面中間彈出一個二維碼視窗，主要是面向行動裝置的，對於PC端瀏覽器而言，百度分享和JiaThis已經做的很好了。

     qrcode box有啥特點呢？

它能夠自動適應螢幕，並且不受行動裝置橫屏、豎屏切換的幹擾。

同時，無論是橫屏的pad裝置，還是豎屏的phone裝置，qrcode box均有良好表現。

     但是，qrcode box並不是完全響應式的，它的尺寸不會跟隨螢幕可視區尺寸變化而變化，因為這貌似沒什麼用(至少對於行動裝置而言用處不大)。

     小菜一再強調，qrcode box是面向行動裝置的，所以小菜沒有過多關注瀏覽器安全色性，目前主流智能手機基本上是安卓和ios作業系統，幸運的是，他們的瀏覽器都是WebKit核心，相容性沒得說。wp系統應該是ie核心吧，就暫時不考慮了。。。

     qrcode box依賴：jquery、jquery.qrcode.js，css樣式參考JiaThis。

     要想使用qrcode box，必須先引入：jquery、jquery.qrcode.js、qrcode.js、jquery.qrcode.box.js（注意順序，jquery必須放前邊），外加一個css：qrcode.box.css。

為啥需要這麼多js呢。。。因為qrcode box不僅僅是一個box，它還得負責產生二維碼呢。。。

     引入之後，這樣調用即可：

1 $("body").qrcodeBox({2   title: "分享到朋友圈",3   des: "使用 “掃一掃” 即可分享網頁到朋友圈",4   qrcodeText: "www.baidu.com",5   offsetX: 0,6   offsetY: 1007 });

     $("body")意思就是插入到html body中，不用管，這麼寫就行了。

     title是box的標題。

     des是box的描述。

     qrcodeText 是二維碼的內容。

     offsetX , offsetY 是說水平方向和豎直方向的位移量，box預設出現在螢幕正中央，萬一你不想呢？可接受正、負數，偏的方向不一樣，具體效果自己試。單位：px。

     來兩張真機：

 

     如果讀者實際測試時，發現box離奇的小，請檢查一下是否在html head中加上：

<meta name="viewport" id="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

 

View On GitHub

 

     有問題歡迎交流。

 

移動端二維碼彈出框,自適應螢幕尺寸