相关疑难解决方法(0)

对于响应式模板,我在CSS中有一个媒体查询:

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

并且,我在调整大小到日志宽度时创建了一个jQuery函数:

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

与CSS检测和JS结果有区别,我有这个元:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/> 

我想这是由于滚动条(15像素).我怎么能做得更好？

我写过这样的CSS媒体查询 -

@media screen and (max-width: 59.9375em) {
  .left {
   display: none;
  }
}

这适用于除Safari 10.0.4及更低版本之外的所有浏览器.Safari似乎以不同方式处理媒体查询.

其他浏览器似乎将window.innerWidth作为用于触发媒体查询的视口宽度,但safari似乎将document.documentElement.clientWidth作为视口宽度并相应地触发媒体查询.

我可以看到实际断点和预期断点之间的差异为15px.我正在寻找一种跨浏览器的方式来处理这个问题.欢迎提出意见,提前谢谢.