javascript - 如何在浏览器宽度低于 950px 时动态调用 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

您还可以使用 CSS 媒体查询:

#my-element {
    width : 950px;
}

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

这会将元素设置为 950px 宽度，除非视口(viewport)小于 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/