如何動態更改iframe的寬度以適當地適合

使用Orderahead允許爲我的客戶端在線訂購簡單的一個網頁網站，我一直在試圖弄清楚如何動態更改iframe的寬度，以便它可以在像iPhones這樣的小屏幕上正確觀看。我已經嘗試了許多想法，但可能我做錯了，希望這裏的某個人可以幫助解決問題。該網站和它的HTML可以在這裏查看：www.vngrill.com如何動態更改iframe的寬度以適當地適合

這裏是JS我需要包括在我的頭標記。

<script type="text/javascript" src="//asset-hosting.s3.amazonaws.com/2-156/jquery.min.js"></script> 
<script type="text/javascript" src="//pixel-track.s3.amazonaws.com/2-156/pixel.min.js"></script> 
<script type="text/javascript" src="//scripts.seo-optimizer.net/1/seo.min.js"></script>

反過來，將以下內容加載到頁面中。

<iframe id="vn_grill_oo" width="100%" height="50px" frameborder="0" scrolling="no" allowtransparency="true" seamless="seamless" src="http://badges.orderaheadapp.com/html/widget.html?widgetStyleHeight=50px&amp;widgetStyleType=oa-full&amp;widgetStylePosition=oa-top&amp;widgetClassStyles=oa-dark%20oa-top%20oa-full&amp;businessName=VN%20Grill&amp;businessid=1413" style="position: fixed; left: 0px; z-index: 9999; top: 0px;"></iframe>

來源

2014-04-19 Richard VanBreemen

I幀的高度和寬度可以-不百分比的設置.... [參考文獻]（HTTP：/ /www.w3schools.com/html/html_iframe.asp） – Bhavik

嘗試在CSS中使用@media。。。 e.g

@media (max-width: 480px) { 
    //re declare your iframe classes here 

}

details請點擊這裏

來源

2014-04-19 06:52:58 arslan

這是一個流體解決方案，而不是使用媒體查詢。我相信應該謹慎使用媒體查詢。

HTML

<div id="wrap"> 
    <iframe class="site" src="http://www.google.com"></iframe> 
</div>

CSS

#wrap { 
    width: 100%; 
    background: orange; 
} 
.site{ 
    width: 100%; 
}

http://jsfiddle.net/dustindowell/YfQ75/

來源

2014-04-19 06:58:00

** [如果從其他部分複製，必須添加引用回答...]（http://stackoverflow.com/a/7011716/2260614）** – Bhavik

@Bhavik我從來沒有見過這個帖子。 –

如何動態更改iframe的寬度以適當地適合

回答

相關問題