☰

如何为我的浏览器输入特定宽度？我正在使用 Chrome 和 Chrome 开发工具

tag-icon • tag-icon google-chrome google-chrome-devtools
如何为我的浏览器输入特定宽度？我正在使用 Chrome 和 Chrome 开发工具

我想输入屏幕尺寸的宽度值，以便可以设置适当的断点。我经常发现自己试图从一个尺寸一次移动一个像素到另一个尺寸。这在 Chrome 中并不总是成功，因为我有时一次移动两个像素。有没有办法让宽度成为输入的特定宽度？

我使用的是 Mac OS X。这个问题与开发工具有关，因为我要问如何使用它通过键盘设置浏览器窗口宽度。如果我用鼠标调整开发屏幕和页面之间的宽度，就会出现一个数字，给出窗口的宽度和高度。这在使用断点创建响应式网站时很有用。我想知道如何使用键盘执行此操作，这样我就不必使用鼠标来获得逐点精度。

答案1

在 Chrome 开发者工具中，打开控制台，然后选择“模拟”选项卡。在这里，您将找到“设备”以从常用设备列表中进行选择（例如 iPhone；这也会更改发送到服务器的用户代理），并且您将找到“屏幕”以手动设置尺寸。

也可以看看移动仿真在 Chrome 的帮助中。

答案2

Chrome 中有一个名为“Web 开发者工具”的扩展程序。该扩展程序具有一项功能，可让您将浏览器调整为特定的 HxW。您甚至可以设置自己的尺寸。

（不确定我是否被允许发布链接，所以我会克制自己不这样做）。

编辑：

谢谢威尔！

以下是该扩展作者的链接：http://chrispederick.com/work/web-developer/

答案3

还有另一个扩展名为 Window Resizer（https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)，其作用与 @Marcelo 提到的相同。这对使用旧版 Chrome 的任何人都可能有用。

答案4

不需要任何插件的替代方法。

  1. 打开内置的 Chrome 开发者工具（F12或Ctrl + Shift + I）
  2. 选择选项Console卡
  3. 输入以下内容以使用当前 URL 打开一个新窗口（下一步仅适用于明确打开为可调整大小的窗口） 
    let w = window.open(window.location, "dev resize", "resizable");

然后，您可以通过以下方式调整新打开的窗口的大小：

  1. 在新窗口打开 Chrome DevTools 并输入 
    window.resizeTo(window.outerWidth - 1, window.outerHeight);
  2. 返回原来的窗口并输入 
    w.resizeTo(w.outerWidth - 1, w.outerHeight);

重复该resizeTo命令，每次将宽度减少 1 个像素。

也适用于 Firefox（可能还有 Edge，但没有测试）

测试地点：

  • Chrome 版本111.0.5563.65
  • Firefox 版本111.0 （我认为 Firefox 和 Chrome 的版本号匹配只是巧合）

相关内容