iframe中的嵌入式響應頁面無法正確呈現

主頁面嵌入了使用JQUERY SUPERSLIDES插件開發的響應移動頁面。如果使用Safari瀏覽器直接在IPHONE上加載，移動頁面看起來很好。但是，當它嵌入到iframe中時，它在IPHONE上的渲染效果並不像預期的那樣（如下面的第2張截圖所示，只有圖像的一部分可見）。iframe中的嵌入式響應頁面無法正確呈現

main.html中

<iframe id="ifrmadcontainer" seamless="seamless" scrolling="no" frameborder="0"  style="width:100%;height:100%;" src="touch.html"> 
    </iframe>

touch.html是http://jsfiddle.net/w1vcrLy8/

它的外觀在桌面Safari和Chrome：

enter image description here

它的外觀上IPhone的Safari：

enter image description here

來源

2014-11-21 vaj oja

您的JSFiddle已損壞，請添加外部資源。我想你使用基於設備的媒體查詢。所以如果是這樣的話，那麼它不會處理比設備小的iframe。 – KyleK 2014-11-21 11:07:58

我可以打開JSFiddle沒有任何問題。我將嘗試使用媒體查詢 – 2014-11-21 11:34:45

如果我們無法看到並測試代碼，那麼JSFiddle就沒用了。在這裏我們至少需要CSS。這裏是所有丟失的資源： CSS/normalize.css CSS/superslides.css CSS/layout.css中圖像/ IMG_0410.JPG 圖像/ IMG_0411.JPG 圖像/ IMG_0412.JPG 的JavaScript/jQuery的/ jquery- 1.9.0.min.js Javascript角/ jquery.easing.1.3.js Javascript角/ jquery.animate-enhanced.min.js Javascript角/ hammer.min.js Javascript角/ jquery.superslides.js CSS /正常化。 css css/superslides.css css/layout.css – KyleK 2014-11-21 13:15:09

元設備是否存在於嵌入頁面的iframe和外部？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

來源

2014-11-21 11:09:22 KyleK

是的，我將這個元標記添加到這兩個頁面。 – 2014-11-21 11:35:03

iframe中的嵌入式響應頁面無法正確呈現

回答

相關問題