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

【问题标题】：How to get screen width from Chrome Dev Tool in JavaScript如何从 JavaScript 中的 Chrome 开发工具获取屏幕宽度
【发布时间】：2021-05-14 18:22:31
【问题描述】：

我想根据屏幕大小执行特定的 javascript 函数。例如，如果在 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");
  }
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

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

【问题讨论】：

当我使用 DevTools 模拟移动设备时，此代码会提醒小尺寸。
嗯，不知道为什么我会变得这么警觉......
只需使用w = window.innerWidth
你需要屏幕宽度还是窗口宽度？

标签： javascript jquery google-chrome-devtools

【解决方案1】：

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

【讨论】：