Question

使用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>

Answer 1

尝试在css中使用@media。。。例如

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

}

details点击此处

Answer 2

这是一个流畅的解决方案，而不是使用媒体查询。我认为应该谨慎使用媒体查询。

<强> 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/

如何动态更改iframe的宽度以适应

2 个答案: