如何在 JavaScript 中从 Chrome Dev Tool 获取屏幕宽度

如何解决如何在 JavaScript 中从 Chrome Dev Tool 获取屏幕宽度

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

$(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 开发工具中获取调整后屏幕尺寸的宽度。

解决方法

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