Google Chrome Dev Tools 宽度不同于 window.innerWidth

Question

如何使 Google Chrome Dev Tools 宽度与window.innerWidth相同

PS: window.screen.width解决了我的问题

Answer 1

我有同样的问题.....我有一个 js function styles 并安排元素....它在加载和调整大小时有 2 个事件侦听器.....在桌面模式下 Evrything 工作正常，加载和调整大小。 ....但是当我从开发工具切换到移动类型时，所有使用 innerWidth 作为变量的元素都会受到干扰......这主要是因为我没有将图像的宽度设置为其 cotainer 的 100%至极允许它在它的原始大小并溢出innerWidth ....尝试在加载js之前找到溢出视口宽度的元素......如果你设置一个宽度高于你的div设备宽度 innerWidth 属性受到干扰.....但仅在移动模式 devtools 上桌面模式工作正常，我想知道问题是否与 chrome devtools 有关，或者移动设备真的会得到错误的 innerwidth 值...检查后导致问题的元素您可以直接从 html 8820268090488 调整其宽度 8 或者在开始使用 innerwidth 属性之前用 js 设置它的宽度...因此问题让我感到困惑并让我想启动自动化测试，因为它出乎意料并且因为我经常使用 innerWidth... PS：Screenwidth 将解决你的问题，但它总是会得到屏幕大小而不是视口大小......对于手机和平板电脑来说，这会很好地工作，因为它们总是全屏但是对于桌面来说，当你调整浏览器大小时window ......并且也许有一天平板电脑和大型手机将允许用户调整屏幕大小

Answer 2

你应该做一个通用的 function。

    function paginate(array, page_size, page_number) {
     return array.slice((page_number - 1) * page_size, page_number * page_size);
    }

每当您的屏幕尺寸发生变化时，都会调用此 function。 首先，尝试相应地获取数据，然后使用 CSS 修复 UI。