☰

如何為我的瀏覽器輸入特定寬度？我正在使用 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 版本號匹配只是巧合）

相關內容