iframe教学

百度是个好东西，可惜有些人不会用…

wuyudi啥问题都有，今天又遇上了一个js问题又来问我2333333

我js也是辣鸡啊…怎么办…当然是百度啦！

效果如下：

怎么实现呢？显然我们用外接CSS的方式是非常蠢的。于是我们想到了一个方法叫做用jQuery。话说wuyudi搞得js比我还多居然会忘了这玩意…

行吧，废话就不多说了，上内嵌html代码：

思路就是分类讨论，因为电脑端屏幕太大，萌萌的`jQuery又没给出不带滚动条的solution，所以只能这样咯…..

<iframe  src="https://www.netpad.net.cn/thirdInnerPad.html?id=59492#posts/59492" frameborder="0" id="demo"></iframe>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script>

$(function(){
   var mobile_flag = isMobile(); // true为PC端，false为手机端

    if(mobile_flag){
        $("#fh5co-main").css({"width": "100%", "float": "right"});
        $("#trademark").css({"margin-left": "48px","margin-top": "16px"});
    }
});
function isMobile() {
   var userAgentInfo = navigator.userAgent;

    var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
    
    var mobile_flag = false;
    
    //根据userAgent判断是否是手机
    for (var v = 0; v < mobileAgents.length; v++) {
        if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
            mobile_flag = true;
            break;
        }
    }
     var screen_width = window.screen.width;
     var screen_height = window.screen.height;    
    
     //根据屏幕分辨率判断是否是手机
     if(screen_width < 500 && screen_height < 800){
         mobile_flag = true;
     }
    
     return mobile_flag;
}
$(document).ready(function() {
  if (isMobile())
  {
    var ifr_width=$(document.body).width();
    $("#demo").css('width',ifr_width * 0.8);
    $("#demo").css('height',ifr_width * 0.45);
  }
  else
  {
    $("#demo").css('width',800);
    $("#demo").css('height',450);
  }
});

</script>

注意在打typora的时候千万不要让你的js代码前面出现红点，要记得把红点删掉！这个东西坑了我两分钟！