响应式设计 + jQuery 很好，除了 Firefox

Question

我正在使用一些非常基本的 jQuery 来强制移动它们的位置：

function ipad() {
var width = jQuery(window).width();
if (width < 1200 && width >= 768){ //if tablet 
jQuery('.mobbut').css('width', '33.333%');
jQuery('#re2').css('max-width', '');
} else {
jQuery('.mobbut').css('width', '100%'); 
jQuery('#re2').css('max-width', '400px');
}
if (width < 768){  //if mobile phone
jQuery('._btnselect').hide();   
} else {
jQuery('._btnselect').show();   
}
}

jQuery(document).ready(function() {
ipad();//run when page first loads
});
jQuery(window).resize(function() {
ipad();//run on every window resize
});
jQuery(window).load(function() {
ipad();//run when page is fully loaded
});

到目前为止，我的网站在 Chrome、Safari、iPad、iPhone 上是完美的，但由于某种原因，当您将 Firefox 窗口的大小调整为小于 1200 像素宽时，它看起来一团糟。亲自尝试here's the webpage。它与jQuery或更多页面布局有关吗？我从另一个设计师那里继承了这个主页，它以前是建立在表格上的，所以这可能会给 FF 带来问题。

Answer 1

我尝试使用媒体查询，但它们不起作用，我不得不求助于 jQuery 来获得结果。

如果它们不起作用，可能是因为语法不正确。像这样试试，这几乎就是你的 jQuery 正在做的事情，但更简单：

#re2 {
  max-width: 400px;
}
.mobbut {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  ._btnselect {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  #re2 {
    max-width: none;
  }
  .mobbut {
    width: 33.333%;
  }
}

--编辑--

因为您似乎正在尝试以 iPad 为目标。试试这些媒体查询，来自this post：

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

这些可能比您的 jQuery 调整更可靠，因为它们基于 device-width 而不是页面 width。

Answer 2

我在启用firebug（我建议使用它）的情况下运行您的网站，错误出现在以下函数中

** function futsal(){
   var wid = jQuery(window).width();
   if (wid <= 1024 && width >= 768){ //if tablet **

就在此处声明 var wid，然后针对宽度进行测试

我同意上述所有 cmets，但请使用媒体查询。这要容易得多。