当前位置： 移动技术网 > IT编程>网页制作>Html5 > 解决部分iphone上使用iframe标签变宽的异常情况

解决部分iphone上使用iframe标签变宽的异常情况

2020年04月24日  | 移动技术网IT编程  | 我要评论

仙剑3窗口化工具,5454小游戏,哈派乐园

iframe在部分iphone手机上变宽

如下图：

 

 

 百度查了很多也试了很多，最后的解决方式如下：

我使用的是vue

html代码：

<!-- 对于iphone中scrolling必须是no，不要担心一定会滚动的，对于安卓手机scrolling则是auto，否则在安卓移动端不会滚动 -->
<iframe id="iframe1" class="iframecss" height="100%" width="100%" :src="url" frameborder="0" :scrolling="type"></iframe>

css代码：

　.iframecss {
    min-width: 100%;
    width: 3.75rem !important; //设置iframe宽度，这个也尤其重要
  }

 

javascript代码：

//onload方法在mounted()中执行
　　onload() {
　　　　//获取iframe标签
      var iframe = document.getelementbyid('iframe1')
      let _this = this
      iframe.onload = function() {
　　　　　// 判断当前的移动端是否是苹果系统
        var u = navigator.useragent
        var isios = !!u.match(/\(i[^;]+;( u;)? cpu.+mac os x/)
        if (isios) {
          try {
　　　　　　　// 这个try catch可有可无
　　　　　　　// 我测试了几遍自己程序，没有这一块代码的话，页面第一次展示的时候有可能页面会变宽一下，但是很快就又正常了，看着变宽只是一个过渡，我不知道是我手机问题还是其他问题，这个没有深究
            document.body.style.width = (window.screen.availwidth / document.body.clientwidth) * 100 + '%'
            var iframebody = iframe.contentwindow.document.body
            iframebody.style.width = document.body.clientwidth + 'px'
            // eslint-disable-next-line no-empty
          } catch (error) {}
　　　　　　// 这是设置iframe的scrolling属性
          _this.type = 'no'
        }
        window.scrollto(0, 0)
      }
    }

图片和内容参考地址：

 

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网