Jquery 如何动态更改iframe的宽度以正确匹配

与Orderahead合作，允许我的客户在线订购一个简单的单页网站，我一直在试图找出如何动态更改iframe的宽度，以便它可以在较小的屏幕（如iPhone）上正确查看。我已经尝试了很多想法，但可能我做错了，希望这里有人能帮助解决。该网站及其HTML可在以下位置查看：www.vngrill.com

这是我需要包含在头标签中的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>

---

尝试在css中使用@media。e、 g

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

}

---

单击此处

这是一种流动的解决方案，而不是使用媒体查询。我认为媒体提问应该少用

HTML

---

@Bhavik我以前从未见过那个帖子。Iframe的高度和宽度不能用百分比设置。。。。

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

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