Question

我有这个代码，我正在尝试使它工作。

基本上，如果屏幕宽度小于480px，则会调整#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.innerWidth而不是jquery。

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

“如果windows.width小于”不起作用

3 个答案: