Question

我有几个来自http://snapwidget.com的iframe。问题是它们是固定大小的，并且与twitter引导程序不一致。有没有办法让他们调整大小？或者至少让我的其他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

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

唯一可能的方法是你正在使用的方式（mediaqueries），但由于这两个原因它不起作用：

<!-- 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放置好

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

2 个答案: