台灣最大程式設計社群網站
線上人數
823
 
會員總數:241875
討論主題:187144
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> iframe嵌入有RWD的網頁在iPhone會出現寬度問題
[ 變換順序 ]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
iframe嵌入有RWD的網頁在iPhone會出現寬度問題
價值 : 100 QP  點閱數:1060 回應數:4

樓主

迷路
高級專家
9490 127
6087 1593
發送站內信

捐贈 VP 給 迷路
用iframe嵌入有RWD的網頁
在電腦和Android的手機顯示都是正常的RWD畫面
可是在iPhone上卻會出現寬度異常的問題
Google查詢,目前有看到兩個說法
一個是iOs在計算iframe內部寬度時,會無視display:none和overflow:hidden
導致有橫向跑馬燈的頁面計算寬度錯誤
另一個是viewport的width=device-width,會因為iframe跨網域導致無法正確取得硬體寬度

測試了很多寫法
再不改動iframe目標網頁結構和CSS的前提下全都失敗了
想請問有大大碰過同樣的問題嗎?有解決方法可供參考嗎?

搜尋相關Tags的文章: [ iframe ] , [ rwd ] , [ ios ] ,
本篇文章發表於2016-05-09 18:44
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
最有價值解答

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
基本上~~~~因為你是跨網域。所以會比較無解。

因為原本可以在主頁面去做jquer操作iframe內的css變動來處理這個問題的。
但你有說了這是跨網域。所以變成無法操作的情況下。就只能去直接變動iframe內的處理了。

可是你又不能去改變iframe內的網頁。

那我還真的想不出還有什麼招來處理了。(雖然還有一招,就是掛載入google的插件。可是~~~~~那是要客戶端操作的)
本篇文章回覆於2016-05-10 14:59
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

迷路
捐贈 VP 給 迷路 檢舉此回應
好吧......雖說是預想中的答案......
會不死心的來發問,最主要是因為測試時
曾經碰到將iframe所在頁面的viewport設定移除後就顯示正常的情況
當時還以為找到解決的辦法,結果再測試別的網站後才發現是特例
本篇文章回覆於2016-05-12 09:28
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

Jhett Lien
檢舉此回應
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}

我是這樣搞定的
本篇文章回覆於2017-08-26 03:22
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

迷路
捐贈 VP 給 迷路 檢舉此回應
經過測試和google後
這個方法必須在iframe設定scrolling="no"
為了讓畫面可以移動
在iframe外再包個div設定overflow:auto;
但是只有ios會將iframe的高度撐開到內容的高度
PC和android的iframe就只剩下150px
沒法讓iframe的高度隨著內容變化
本篇文章回覆於2017-08-31 18:35
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
[ 變換順序 ]   
1

回覆
如要回應,請先登入.