与 Oderahead 合作，为我的客户提供简单的单页网站在线订购，我一直在尝试弄清楚如何动态更改 iframe 的宽度，以便它可以在 iPhone 等较小的屏幕上正确查看。我已经尝试了很多想法，但可能我做错了，希望这里有人可以帮助解决问题。该网站及其 HTML 可在此处查看:www.vngrill.com
这是我需要包含在我的 head 标签中的 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&widgetStyleType=oa-full&widgetStylePosition=oa-top&widgetClassStyles=oa-dark%20oa-top%20oa-full&businessName=VN%20Grill&businessid=1413" style="position: fixed; left: 0px; z-index: 9999; top: 0px;"></iframe>
最佳答案
尝试在 css 中使用@media。 . .例如
@media (max-width: 480px) {
//re declare your iframe classes here
}
details点击这里
关于jquery - 如何动态更改 iframe 的宽度以适合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23166866/