如何使 Google Chrome 开发工具宽度与
window.innerWidthPS：
window.screen.width我遇到了同样的问题.....我有一个js函数来设置元素的样式和排列...它在加载和调整大小时有2个事件侦听器.....在桌面模式下，Evrything工作正常，加载和调整大小都正常.....但是当我从开发工具切换到移动类型时，所有使用innerWidth作为变量的元素都会受到干扰.....这主要是因为我没有将图像的宽度设置为其宽度的100% cotainer 允许它保持原始大小并溢出innerWidth ....尝试在加载js之前找到溢出视口宽度的元素......如果您设置的div的宽度高于你的设备宽度innerWidth属性受到干扰......但只有在移动模式devtools上，桌面模式工作正常，我想知道问题是否与chrome devtools有关，或者手机真的会得到错误的innerwidth值......检查后导致问题的元素，您可以直接从 html css 调整其宽度，或在开始使用 insidewidth 属性之前使用 js 设置其宽度...因此问题让我感到困惑，让我想启动自动化测试，因为它是意外的，因为我经常使用innerWidth .... PS：Screenwidth会解决你的问题，但它总是会得到屏幕尺寸而不是视口尺寸...对于手机和平板电脑来说，这会工作得很好，因为它们总是全屏的，但对于台式机来说就是这样当您调整浏览器窗口大小时，这将不起作用......也许有一天平板电脑和大型手机将允许用户调整屏幕大小
基于 Chromium 的浏览器的
window.innerWidth为了防止这种情况，建议在加载网页内容（即嵌入元素）之前获取
window.innerWidthwindow.innerWidth 的 JavaScript 代码放置在 HTML 文件中页面内容之前。换句话说，将内容放在 <script></script><body> function paginate(array, page_size, page_number) {
return array.slice((page_number - 1) * page_size, page_number * page_size);
}
每当屏幕尺寸发生变化时调用此函数。首先，尝试相应地获取数据，然后使用 CSS 修复 UI。