请问iframe如何进行不同尺寸设备切换比如手机平板电脑等?
网友回复
效果如下:
完整代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(['jquery.qrcode.min'], function() { $("#div-qcode").qrcode({ width: 200, height: 200, text: window.location.href }); }); $("#desk-view").click(function() { $("#priview-inf").removeClass().addClass("desk"); }); $("#pad-view").click(function() { $("#priview-inf").removeClass().addClass("pad"); }); $("#phone-view").click(function() { $("#priview-inf").removeClass().addClass("phone"); }); $("#qcode-view").hover(function() { $("#div-qcode").show(); }, function() { $("#div-qcode").hide(); }); }); </script> <style> body { padding: 0; margin: 0; } #priview-inf { height: 100%; overflow: visible; position: relative; } .desk { width: 100vw; height: 100vh!important; margin: 0 auto; transition: all 0.5s ease 0s; } .pad { height: 960px!important; margin: 0 auto; padding: 96px 100px 115px 49px; width: 785px; margin-top: 40px; background: url(//repo.bfw.wiki/bfwrepo/image/5e1e76f746aed.png) no-repeat 0 0; transition: all 0.5s ease 0s; } #div-qcode { background: white; padding: 10px; width: 200px; height: 200px; position: absolute; top: 30px; left: 80px; z-index: 11; display: none; } .phone { height: 735px!important; margin: 0 auto; padding: 102px 25px 159px 23px; width: 414px; margin-top: 40px; background: url(//repo.bfw.wiki/bfwrepo/image/5e1e7690cf0da.png) no-repeat; transition: all 0.5s ease 0s; } iframe { padding: 0; border: none; margin: 0; width: 100%; height: 100%; } #device-area { height: 30px; padding: 0 10px; } #device-area a { margin-right: 7px; margin-top: 7px; width: 17px; height: 16px; float: left; cursor: pointer; } #qcode-view { background: url("//repo.bfw.wiki/bfwrepo/icon/5da6cfc9b2953.png"); background-size: cover; } #desk-view { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat 0px 0 } #pad-view { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -24px 0 } #phone-view { background: url(//repo.bfw.wiki/bfwrepo/icon/5e1e776a4a749.png) no-repeat -71px 0 } </style> </head> <body> <div id="div-qcode"></div> <div id="device-area"> <a id="desk-view"></a> <a id="pad-view"></a> <a id="phone-view"></a> <a id="qcode-view"></a> </div> <div id="priview-inf" class="desk"> <iframe src="https://www.bfw.wiki"></iframe> </div> </body> </html>