Javascript 响应性设计&x2B；jQuery很好，除了Firefox

我使用了一些非常基本的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
});

函数ipad（）{
var width=jQuery（window）.width（）；
if（宽度<1200&&width>=768）{//if
jQuery（'.mobbut'）.css（'width'，'33.333%）；
jQuery（'#re2'）.css（'max-width'，''）；
}否则{
jQuery（'.mobbut'）.css（'width'，'100%'）；
jQuery（'#re2'）.css（'max-width'，'400px'）；
}
if（宽度<768）{//if移动电话
jQuery（'.\u btselect'）.hide（）；
}否则{
jQuery（'.btnselect'）.show（）；
}
}
jQuery（文档）.ready（函数（）{
ipad（）；//第一次加载页面时运行
});
jQuery（窗口）.resize（函数（）{
ipad（）；//在每个窗口上运行调整大小
});
jQuery（window）.load（函数（）{
ipad（）；//页面完全加载时运行
});

到目前为止，我的网站在Chrome、Safari、iPad和iPhone上都是完美的，但由于某些原因，当你将Firefox窗口的大小调整到小于1200px时，它看起来一团糟。你自己试试看。这是与jQuery有关还是与页面的布局有关？我从另一个设计师那里继承了这个主页，它以前是建立在表上的，因此这可能会给FF带来问题。

我运行您的站点时启用了（我建议使用它），错误出现在以下函数中

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

**功能五人制（）{
var wid=jQuery（window）.width（）；
if（wid=768）{//if**

就在这里，您声明了var wid，然后根据宽度进行测试

不过，我同意上面所有的评论，使用媒体查询。这要容易得多

---

我试着使用媒体查询，但没有效果，我不得不求助于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。请尝试以下媒体查询：

---

这些可能比您的jQuery调整更可靠，因为它们是基于

设备宽度

，而不是页面宽度

，为什么不使用媒体查询？^这正是媒体查询的目的。我尝试使用媒体查询，但它们不起作用，我不得不求助于jQuery来获得结果。我问题似乎是Firefox的宽度是由屏幕上最大图像的宽度决定的，而不是调整图像大小以适应窗口…知道这会产生错误的原因以及如何修复吗？@user3589055正如dops所提到的，这个函数的“宽度”是多少？你可能是指“wid”@MiniRagnarok wid是变量，但是我现在看到了一个错误，我写的是width而不是wid。现在这个问题已经解决了，这个网站在小于1200的屏幕上看起来仍然很糟糕，除了页脚现在可以正常工作了。@user3589055老实说，我认为你在尝试让一个表中制作的网站响应时不会有太多运气。有些人mes你必须咬紧牙关，告诉你的上级/客户他们的要求是不合理的。让网站响应几乎没有捷径。问题似乎是Firefox的宽度是由屏幕上最大图像的宽度决定的，而不是调整图像大小以适应窗口。。。

/* 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 */
}