如何从 JavaScript 中的 Chrome 开发工具获取屏幕宽度

Question

我想根据屏幕大小执行特定的 javascript function 。 例如，如果在 iPhone 8 或 10 上查看该页面，我要执行 function1，否则，我要执行 function2。 我正在使用 Chrome 开发工具来模拟它。 以下是我的示例代码。

 $(document).ready(function() { //getting screen width by plain javascript w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth; alert("JS Width: " + w); //on chrome dev tools w corresponds to 980 for iPhone 8 var targetWidth = 375; //getting screen width by plain jQuery alert("Width: " + $(window).width()); //on chrome dev tools this value corresponds to 980 for iPhone 8 if ($(window).width() >= targetWidth) { //Add javascript for screens wider than or equal to 375here alert("big"); } else { //Add javascript for screens smaller than 375 here alert("small"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

因此，无论我在 Chrome 开发工具上使用什么手机尺寸，尺寸总是为 980。由于我没有可以运行我的网站并使用实际手机测试我的代码的服务器，我想知道如何从 Chrome 开发工具中获取调整后屏幕尺寸的宽度。

Answer 1

不知何故，上面的代码对我不起作用。 当我在 HTML 页面上对其进行测试时，它运行良好。 但是，我的页面是一个 aspx 页面，并且是一个大型项目的一部分以及母版页。 我已经通过从 CSS 媒体查询中调用 jQuery 方法使其工作，如链接中所述： https://www.fourfront-widthand-media-queue/jquery-window