jQuery/Javascript-如何在所有浏览器（尤其是Safari）中获得与CSS断点一致的浏览器窗口宽度？

我一直在尝试使用Javascript或jQuery检索浏览器窗口宽度，并使其与CSS媒体查询一致

当我设置浏览器以便标尺（和我的CSS）显示它的宽度正好是768px时，下面是我使用jQuery（$（window.width（））和Javascript（window.innerWidth））获得的结果

正如您所看到的，jQuery（我最初使用的）到处都是，这让我感到惊讶，并在我的网站上引发了问题。看起来普通的Javascript与window.innerWidth更为一致，但在MacOS 10.13上的Safari（最新版本）中返回了错误的值。Safari被我们的大部分观众使用，所以我想使用一些东西，当浏览器设置为768时，所有浏览器都会返回768

是否有其他Javascript或jQuery属性可以尝试

编辑（回答评论）

---

对于

html

和

body

元素，您正在执行此操作的页面的CSS是什么样子的？@T.J.Crowder-请参见编辑。我从Chrome的检查员那里得到了这个，所以它应该是所有应用的东西。如果有必要的话，我会使用Bootstrap3。遗憾的是，我手边没有Mac电脑来测试这个有问题的案例（Safari/MacOS）。我当然会在

html

和

body

中添加一个填充/边距重置，并且我可能也会应用我通常的

框大小重置（来自Paul Irish）：
html{padding:0；margin:0；框大小：border-box；}*，*：before，*：before，*：before，{box-size:inherit；}body{padding:0；margin:0；}
（），但是
-------------------------------------------------------------------------
| Browser, OS                   | $(window).width() | window.innerWidth |
-------------------------------------------------------------------------
| Chrome, MacOS 10.13           |      753          |        768        |
-------------------------------------------------------------------------
| Safari, MacOS 10.13           |      768          |        783        |
-------------------------------------------------------------------------
| Chrome, MacOS 10.14           |      768          |        768        |
-------------------------------------------------------------------------
| Safari, MacOS 10.14           |      768          |        768        |
-------------------------------------------------------------------------
| Chrome, Windows 10            |      753          |        768        |
-------------------------------------------------------------------------
| Edge, Windows 10              |      751          |        768        |
-------------------------------------------------------------------------
| Internet Explorer, Windows 10 |      768          |        768        |
-------------------------------------------------------------------------
| Opera, Windows 10             |      753          |        768        |
-------------------------------------------------------------------------


html {
   font-size: 100%;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   font-family: sans-serif;
}
body {
   line-height: 1.42857143;
   margin: 0;
   font-family: 'Weissenhof-Grotesk', Tahoma, sans-serif;
   font-size: 16px;
   color: #000000;
   background-color: #fff;
}