当前位置: 首页 > Web前端 > HTML

手机端二维码弹框,自适应屏幕大小!

时间:2023-04-02 15:47:24 HTML

qrcodebox,一个二维码小工具,调用它可以在页面中间弹出一个二维码窗口,主要针对移动设备。对于PC浏览器,百度分享和JiaThis已经做得很好了。二维码盒子有什么特点?自动适配屏幕,不受移动设备横竖屏切换干扰。同时,无论是横屏pad设备,还是竖屏手机设备,二维码盒子都有不错的表现。但是,二维码框并不是完全响应式的,它的大小不会随着屏幕可见区域的大小而变化,因为它看起来没什么用(至少对移动设备来说用处不大)。小菜一再强调二维码盒子是面向移动端的,所以小菜并没有太在意浏览器的兼容性。目前主流的智能手机基本都是安卓和ios操作系统。好在他们的浏览器都是WebKit内核,兼容性没话说。wp系统应该是ie内核,暂时不考虑。..二维码框依赖:jquery、jquery.qrcode.js、css样式参考JiaThis。要使用二维码框,首先要引入:jquery、jquery.qrcode.js、qrcode.js、jquery.qrcode.box.js(注意顺序,jquery一定要先放),加上一个css:qrcode.box.css.为什么需要那么多js?..因为二维码盒子不仅仅是一个盒子,它还负责生成一个二维码。..引入后直接这样调用即可:1$("body").qrcodeBox({2title:"分享到微信朋友圈",3des:"使用微信“扫一扫”分享网页到朋友圈",4qrcodeText:"www.baidu.com",5offsetX:0,6offsetY:1007});$("body")的意思是插入到htmlbody中,不用着急,这样写就可以了。title是框的标题。des是盒子的描述。qrcodeText是二维码的内容。offsetX,offsetY指的是水平和垂直的偏移量,盒子默认出现在屏幕中央,如果不想出现怎么办?正负数都可以,偏差的方向不同。具体效果自己试试。单位:px下面是两张真机效果图:如果读者在实际测试中发现盒子小的奇怪,请检查是否在html头部添加:最后:在学习web前端的过程中,难免会遇到很多问题。这些问题可能会困扰你很长时间。为此,我有个web开发学习交流群(545667817)全是segmentfault的小伙伴,整理了最全的前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5项目实战实战学习资料,想学大家都可以申请加入,大家互相学习,互相交流,共同进步,每天分享不一样的学习资料!