浏览器宽度低于950 to时，如何动态调用jquery函数？

Question

我试图调整视频的大小，这样如果只有当浏览器的宽度下降到960像素以下时，才能填充100%的容器。出于与内联样式相关的原因，我用jquery编写了这个简单的函数。如果工作正常--但只有在加载窗口时才调用它。

$(document).ready(function(){
    if ($(window).width() < 950) {
        $("video").width("100%");
    }
});

如何编写类似的jquery函数，在调整浏览器窗口的大小时动态地更改视频的宽度？我试过以下几种方法，但都没有用。

$(window).resize(function() {
if ( $(window).width() < 950) {
    $("video").width("100%");
}
});

*编辑*这是新的视频html代码：

<div id="sliderbg">
   <div class="container">
      <div id="slider" class="row">
      <div class="eight columns">   
    <div id="text-6" class="widget widget_text">            <div class="textwidget"><br>
<video id="wp_mep_1"   width="600" height="330" poster="http://www.first1444.com/wp-content/themes/lightningyellow/images/poster.png" controls="controls" preload="none"  >
    <source src="http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" type="video/mp4" />      
    <object width="600" height="330" type="application/x-shockwave-flash" data="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf">
        <param name="movie" value="http://www.first1444.com/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&amp;file=http://first1444.com/wp-content/themes/lightningyellow/videos/robotintro.mp4" />          
    </object>       
</video>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#wp_mep_1').mediaelementplayer({
    m:1

    ,features: ['playpause','current','progress','volume','tracks']

});
});
</script>

<br/><h6 id="tagline">See <b><i>FIRST</i></b> Team #1444 in action building this years robot</h6>
</div>
</div><script type="text/javascript">
$(document).ready(function() {
if ( $(window).width() < 960) {
    $("video").width("100%");
}
});
</script>

</div><!-- eight columns -->

顺便说一下，我使用的是基金会css框架。我怀疑这会导致这个问题。

Answer 1

你只是有个打字错误。它应该是：

$(window).resize(function() {

调整大小()文档：http://api.jquery.com/resize/

Answer 2

还可以使用CSS媒体查询：

#my-element {
    width : 950px;
}

@media all and (max-width: 950px) {
    #my-element {
        width : 100%;
    }
}

这将元素设置为950px宽度，除非视图端口小于950px，在这种情况下，元素被设置为100%宽度。

下面是一个使用媒体查询的演示：http://jsfiddle.net/G9gx6/

下面是一个很好的源代码，可以找到浏览器支持什么：http://caniuse.com/#feat=css-mediaqueries

更新

当然，您也可以使用JavaScript：

//bind to the windows resize event
$(window).on('resize', function () {

    //check if the viewport width is less than 950px
    if ($(this).width() < 950) {

        //if so then set some element's width to 100%
        $('#my-element').width('100%');
    } else {

        //otherwise set the element's width to 950px
        $('#my-element').width('950px');
    }

//trigger a resize event on the window object so this code runs on page-load
}).trigger('resize');

更新

为了优化这段代码，我将缓存$('#my-element')选择，并将resize事件处理程序节流为只在一次中运行一次：

$(function () {
    var $element = $('#my-element'),
        resizeOK = true,
        timer    = setInterval(function () {
            resizeOK = true;
        }, 100);
    $(window).on('resize', function () {
        if (resizeOK) {
            resizeOK = false;
            if ($(this).width() < 950) {
                $element.width('100%');
            } else {
                $element.width('950px');
            }
        }
    }).trigger('resize');
});

下面是一个演示：http://jsfiddle.net/G9gx6/1/

Answer 3

您想要做的是将您的函数包装在：

$(window).resize(function(){
    alert('You resized the window!');
});

参考资料：.resize()