2013-07-05 92 views
0

我在這裏有一個網站:Campus Tour,我試圖在iframe中顯示。這裏的目標是能夠確切地看到學生在移動設備上觀看旅程時看到了什麼。似乎無法在IE8中正確顯示iframe?

下面是iPhone視:iPhone Viewport

它正確地顯示在瀏覽器,但我不能讓它在IE8中顯示。在IE8中查看時,iframe以全站點模式顯示網站,並且不符合移動CSS。

這裏是我的iframe代碼:

<div align="center" style="position: fixed; margin-top: 2%; margin-left: 12%; border: 5px solid #f60; width: auto; height: auto;"> 

       <h2 style="font-weight:bold; background-color: #f60; color: #fff;">iPhone 5 Display</h2> 
        <iframe style="width:568px; height: 320px; " src="http://webfro.gs/south/tour" frameborder="0"></iframe> 
      </div> 

我GOOGLE了我的心臟並瞭解怪癖模式,等等,但不太清楚如何使用它。我不確定這是否是正確的解決方案。

你需要什麼信息才能在這裏協助?

+0

重新評論怪癖模式:不,怪癖模式永遠不是正確的答案。 – Spudley

+0

這就是爲什麼我沒有實現它。有任何想法嗎? – webfrogs

+0

是的,耐心! :-) ...我剛剛發佈了一個答案。 – Spudley

回答

2

您的問題在於IE8不支持CSS媒體查詢,您正在使用它來根據視口的大小更改佈局。

如果您需要爲此支持IE8,最好的解決方案是使用像Respond.js這樣的polyfill腳本,它支持將媒體查詢語法支持到IE8中。

+0

您對圖片支持有何建議?該網站正確顯示在iframe中,但某些屏幕上的主圖像是垂直延伸的。有什麼想法嗎?這裏有一個鏈接:[iPhone5 Viewport](http://webfro.gs/south/tour/viewport_iphone5.html) – webfrogs