响应式设计中固定大小的 iframe

Question

我有几个来自http://snapwidget.com 的 iframe。问题是它们的大小是固定的，并且不能很好地与 twitter bootstrap 配合使用。有没有办法让他们调整大小？或者至少让我的其他 div 在屏幕尺寸变化时不会低于/重叠，而是在它们周围移动？

index.html

<div class="container">
        <div class="row">
            <div class="span8 stayright">
                <!-- SnapWidget desktop-->
                <div class="instagram_desktop">
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>
                </div>
                <!-- SnapWidget ipad-->
                <div class="instagram_inbetween">          
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NjIwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:620px; height: 620px" ></iframe>
                </div>
                <!-- SnapWidget ipad profile-->
                <div class"instagram_ipad_p">
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NDc2fDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:476px; height: 476px" ></iframe>
                </div>
                <!-- SnapWidget iphone-->
                <div class"instagram_iphone"
                    <iframe src="http://snapwidget.com/mp/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58MzcwfDJ8M3x8eWVzfDV8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:370px; height: 370px" ></iframe>
                </div>
            </div>
            <div class="span4 stayleft small1">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span4 stayleft small2">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">
            </div>
            <div class="span8 big2">
                <!-- SnapWidget -->
                <iframe src="http://snapwidget.com/in/?u=ZGVudmVyc3RyZWV0aGVhcnR8aW58NzYwfDF8MXx8eWVzfDB8bm9uZQ==" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:770px; height: 770px" ></iframe>
            </div>

            <div class="span4 r2 small1">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">

            </div>
            <div class="span4 small2">
                <img src="../../Sites/Boiler%20Plate/img/joshmays.jpg" alt="joshmays" width="370" height="370">

            </div>

            <div class="span4 r3 small1">
                <h2>Something Else</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
</div>

css

.stayright {
    float: right;
    height: 100%;
    padding-bottom: 25px;
}

.stayleft {
    float: left;
    height: 100%;
}

.small1 {
    padding-bottom: 15px;
}

.small2 {
    padding: 15px 0 25px 0; 
}

.big2 {
    padding: 25px 0px;
}

.r2 .small1 {
    padding-bottom: 15px;
}

.big2 {
    margin-top: -25px;  
}

@media (min-width: 1024px) {
.instagram_iphone { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 1023px) and (min-width: 769px) {
.instagram_iphone { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_desktop { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 768px) and (min-width: 481px) {
.instagram_desktop { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone { display: none !important; }
.instagram_iphone_ls { display: none !important; }
}

@media all and (max-width: 480px) and (min-width: 321px) {
.instagram_desktop { display: none !important; }
.instagram_ipad_p { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_iphone { display: none !important; }
}

@media (max-width: 320px) {
.instagram_iphone_ls { display: none !important; }
.instagram_desktop { display: none !important; }
.instagram_inbetween { display: none !important; }
.instagram_ipad_p { display: none !important; }
}

Answer 1

好的，找到小部件后，我可以调整它的大小，但是小部件的内部没有响应，所以没用。

唯一可能的方法是您正在使用的方法（媒体查询），但由于以下两个原因它不起作用：

<!-- SnapWidget ipad profile-->
            <div class"instagram_ipad_p">

类缺少 = (class="")

<!-- SnapWidget iphone-->
            <div class"instagram_iphone"

div 没有关闭 (<div>) 并且类缺少 =。

这些修改后，您的媒体查询将起作用！ Fiddle

Answer 2

jQuery 有一个很好的方法，叫做 resize。你可以做类似的事情。 （代码未测试）

//initially set the iframe's width to the window size
mtarget = getElementById... //get the iframe
mtarget.width = $(window).width;

$(window).resize(function() {
//and again...set the width of the iframe to $(window).width()...?
});

理论上，这应该有助于您的 iframe 放置得很好