"if windows.width less than" 无效

Question

我有这段代码，我正在努力让它发挥作用。

基本上，如果屏幕宽度小于 480 像素，则会调整 #page div 的高度并使其垂直居中。否则，如果宽度更宽，则只是垂直居中。

jQuery(document).ready(function(){
var wwidth = jQuery(window).innerWidth();
   if (wwidth <= 480) {
     function thirty_pc() {
     var height = jQuery(window).innerHeight();
     var thirtypc = ((95 * height) / 100) - 40;
     var topmargin = (height - thirtypc - 40) / 2;
     thirtypc = parseInt(thirtypc) + 'px';
     topmargin = parseInt(topmargin) + 'px';
     jQuery("#page").css('height',thirtypc);
     jQuery("#page").css('margin-top',topmargin);
     }

    thirty_pc();
    jQuery(window).bind('resize', thirty_pc);

   } else {
     function thirty_pc() {
     var height = jQuery(window).innerHeight();
     var pageheight = jQuery("#page").height()
     var thirtypc = (height - pageheight - 60);
     var topmargin = (thirtypc / 2);
     thirtypc = parseInt(thirtypc) + 'px';
     topmargin = parseInt(topmargin) + 'px';
     jQuery("#page").css('margin-top',topmargin);
     }

    thirty_pc();
    jQuery(window).bind('resize', thirty_pc);
}});

但是，当 windows.width 小于 480px 时它不会触发...无法理解为什么。

Answer 1

你必须先绑定resize事件。

而且你的代码一团糟。请整理一下，这样您可以更快地看到错误。

试试这个：

jQuery(document).ready(function() {

  function thirty_pc() {
    var wwidth = jQuery(window).width();
    if (wwidth <= 480) {
      var height = jQuery(window).innerHeight();
      var thirtypc = ((95 * height) / 100) - 40;
      var topmargin = (height - thirtypc - 40) / 2;
      thirtypc = parseInt(thirtypc) + 'px';
      topmargin = parseInt(topmargin) + 'px';
      jQuery("#page").css('height',thirtypc);
      jQuery("#page").css('margin-top',topmargin);
      console.log('under 480px');
     } else {
      var height = jQuery(window).innerHeight();
      var pageheight = jQuery("#page").height();
      var thirtypc = (height - pageheight - 60);
      var topmargin = (thirtypc / 2);
      thirtypc = parseInt(thirtypc) + 'px';
      topmargin = parseInt(topmargin) + 'px';
      jQuery("#page").css('margin-top',topmargin);
      console.log('over 480px');
    }
  }

  jQuery(window).bind('resize', thirty_pc);
});

Answer 2

roNn23 发布的代码只需少量（小）更改即可正常运行，如下所示：

jQuery(document).ready(function() {
   function thirty_pc() {
   var wwidth = jQuery(window).width();
      if (wwidth <= 480) {
         var height = jQuery(window).height();
         var thirtypc = ((95 * height) / 100) - 40;
         var topmargin = (height - thirtypc - 40) / 2;
         thirtypc = parseInt(thirtypc) + 'px';
         topmargin = parseInt(topmargin) + 'px';
         jQuery("#page").css('height',thirtypc);
         jQuery("#page").css('margin-top',topmargin);
      } else {
         var height = jQuery(window).innerHeight();
         var pageheight = jQuery("#page").height()
         var thirtypc = (height - pageheight - 60);
         var topmargin = (thirtypc / 2);
         thirtypc = parseInt(thirtypc) + 'px';
         topmargin = parseInt(topmargin) + 'px';
         jQuery("#page").css('margin-top',topmargin);
         }
      }
thirty_pc();    
jQuery(window).bind('resize', thirty_pc);
});

现在我正在尝试删除智能手机上出现的一些垂直滚动！

Answer 3

这将触发 window 调整大小事件。使用 window.innerWidth 而不是 jquery.

$(document).ready(function() {
    $(window).on('resize', moveDiv);
});
function moveDiv() {
    if (window.innerWidth < 481) {
        //do something
    }
}

"if windows.width less than" 无效

"if windows.width less than" doesn't work

jquery

if-statement

window

width