精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
解決部分iphone上使用iframe標簽變寬的異常情況

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)
      }
    }

第二種:(這是補充的內容,優先考慮使用這種

html代碼:

<div class="header"></div>
<div class="swapper">
    <!-- scrolling必須是auto或者yes,iframe才能滾動,不區分安卓和蘋果 -->
      <iframe id="iframe1" class="iframeCss" height="100%" width="100%" :src="linkurl" frameborder="0" scrolling="auto"></iframe> 
</div>

css代碼:

.header {
     height: 0.44rem;
    width: 100%;
    background-color: #09b6f2;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
}
.swapper {
    position: fixed;
    top: 0.44rem;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
}

沒有JavaScript代碼需要處理;

這樣能保證頭部固定,iframe的內容也可以滾動,不用處理不同移動端的情況。

圖片和內容參考地址:https://www.cnblogs.com/wuzhiquan/p/5358731.html

 

 

本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
連續滾動圖片的制作
免費的新聞代碼大全
跑馬燈效果代碼大全
如何使用獲取到的百度地圖API代碼
常用的HTML代碼
萬年歷及代碼
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 应用必备| 新龙县| 鄂州市| 青神县| 米脂县| 阿克陶县| 项城市| 怀化市| 凭祥市| 饶平县| 蓝田县| 永靖县| 拜城县| 天柱县| 易门县| 佛山市| 当阳市| 金湖县| 高唐县| 凭祥市| 铁岭县| 姚安县| 铁力市| 五家渠市| 保山市| 怀远县| 关岭| 临沂市| 临沧市| 陈巴尔虎旗| 阳谷县| 景泰县| 河间市| 大余县| 麻城市| 盘锦市| 噶尔县| 仪征市| 聂荣县| 通榆县| 江津市|