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

Responsive design + jQuery fine except Firefox

本文关键字：很好 除了 Firefox jQuery 响应      更新时间：2023-09-26

我正在使用一些非常基本的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窗口大小调整到小于1200px宽时，它看起来很乱。你自己试试，这是网页。这是与jQuery或更多的页面布局有关吗?我从另一个设计师那里继承了这个主页，它以前是建立在表格上的，所以这可能会给FF带来问题。

我尝试使用媒体查询，但它们不起作用，我不得不转向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。试试这些媒体查询，从这篇文章:

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

我在启用firebug(我建议使用它)的情况下运行您的网站，错误在以下功能

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

在这里声明var width然后测试width

我同意上面所有的评论，使用媒体查询。

相关文章：