$（window）.resize（）;不按预期方式工作

我想在一组功能上使用大于768px的屏幕尺寸，另一组使用小于此尺寸的一切。我需要.resize()，这样我就可以知道用户何时在横向和纵向视图之间转动他们的平板电脑或手机。

.resize()事件内部的代码工作正常，如果我刷新页面，但它就好像事件没有被触发。有什么想法吗？

<script> 
jQuery(document).ready(function($){ 
    function mobileFilterMenu(){ 
     var screenTest = $(window).width(); 
     if (screenTest >= 769){ 
      $(window).on('scroll', function() { 
        var scrollTop  = $(window).scrollTop(), 
        elementOffset = $('.inventory-search > .col-md-9').offset().top, 
        distance  = (elementOffset - scrollTop); 
       if(distance <= 0){ 
        $('.filter-form').css('top', Math.abs(distance)); 
       }else{ 
        $('.filter-form').css('top', 0); 
       } 
      }); 
     }else{ 
      var vHeight = $(window).height() - $('#switch').height() - $('#primary-menu-toggle').height(); 
      $('.filter-form').css('height', vHeight + 'px'); 
      vTextHeight = vHeight - 20; 
      $('.wpv-filter-form').css('height', vTextHeight + 'px'); 
      objNegHeight = (vHeight * -1) + 50; 
      $('.filter-form').css('top', objNegHeight + 'px'); 

      var i; 
      $('#switch').click(function(){ 
       if (i === 0){ 
        $('.filter-form').css('top', objNegHeight + 'px'); 
        i++; 
       }else{ 
        $('.filter-form').css('top', '50px'); 
        i = 0; 
       } 
      }); 
     } 
    } 
    mobileFilterMenu(); 
    $(window).resize(mobileFilterMenu()); 
}); 
</script>

来源

2015-09-03 ExcellentSP

你做错了！ [这是什么响应式设计'媒体查询'照顾没有错误的JavaScript。]（https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#apply -media查询基础上，视大小）！ –

'mobileFilterMenu（）'调用函数。你想要通过它。 '$（窗口）。在（ '调整'，mobileFilterMenu）;' –

只要改变你的这部分代码。这应该可以解决你的问题。

$(window).resize(mobileFilterMenu);

不是传递mobileFilterMenu（）的，通过这个mobileFilterMenu

内的参数$ window.resize应该有一个功能不a 函数调用。

希望这可以解决您的问题。

来源

2015-09-03 21:45:35 mechanicals

您应该使用media queries基于视窗尺寸不编码申请CSS！

媒体查询使我们能够建立一个灵敏的体验，其中特定样式应用于小屏幕，大屏幕和之间的任何。媒体查询语法允许创建可根据设备特性应用的规则。

@media (query) { 
    /* CSS Rules used when query matches */ 
}

虽然有我们可以查询在几个不同的项目，那些使用最常用于响应网页设计的最小宽度，最大宽度，最小高度和最大高度。

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css"> 
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css"> 
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css"> 
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css"> 
<style> 
    @media (min-width: 500px) and (max-width: 600px) { 
    h1 { 
     color: fuchsia; 
    } 

    .desc:after { 
     content:" In fact, it's between 500px and 600px wide."; 
    } 
    } 
</style>

https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#apply-media-queries-based-on-viewport-size

来源

2015-09-03 21:42:55

$（window）.resize（）;不按预期方式工作

回答

相关问题