☰

Google Chrome - 縮放而不改變視口

tag-icon • tag-icon google-chrome google-chrome-extensions zoom
Google Chrome - 縮放而不改變視口

也許我忽略了一些事情或不知道如何很好地表達我的問題，但我無法在網路上找到任何關於此的資訊。

我想放大 Chrome，而不改變視口或網站。因此，如果我放大網站，我可以放大細節，而無需我的響應式設計將其移動並將其縮放到“正確”的尺寸。

有沒有一個 chrome 擴充功能可以實現這個功能，或者有辦法在 Chrome 中啟用這樣的縮放功能？

答案1

如果您有精密觸控板（大多數新筆記型電腦都有）或觸控屏，則可以張開手指進行縮放。

答案2

這個擴充正是您正在尋找的：自訂頁面縮放

但遺憾的是，它沒有捷徑。

聚苯乙烯：請記住，此擴充功能出於某種原因請求您存取所有網站的資料存取權限。

答案3

對於 macOS
取網頁。按 Command 和“+”按鈕進行縮放。

對於 Windows
取網頁。按住 Ctrl 按鈕並向上滾動滑鼠滾輪。

編輯

1) 進入系統偏好設定 -> 輔助功能
2) 選擇縮放並啟用「使用鍵盤快速鍵縮放」
3) 記下快速鍵。
4) 預設情況下⌥- ⌘-=用於放大，⌥- ⌘--用於縮小。

答案4

使用者代理程式（Chrome、Firefox、Android 版 Chrome 等）的預設行為是將正文設定為視窗的 100%，確切地說，是視覺視窗。因此，當調整視窗大小時，視窗（佈局和視覺）會發生變化，這導致它始終合身內容並導致其他不良（並非總是）後果，例如更改響應式設計中的佈局。

如果您使用行動優先方法，請將 body min-width（在媒體查詢中）設為絕對值並使用min-device-width或max-device-width來觸發媒體查詢。

這會觸發媒體查詢，不是在調整瀏覽器視窗大小時觸發，而是僅在媒體查詢中提到大小的裝置上呈現內容時觸發。

例如：

body {
width : 90%;
}

並使用媒體查詢，例如：

@media screen and (min-device-width: 960px) {

  body {
   width : 900px;
  }

// Other CSS Rules to apply when device width > 960px
}

這將導致您的佈局在行動裝置上具有響應能力，但在桌面上則無法回應，即使您的瀏覽器視窗已調整大小或縮放。相反，當內容縮放或調整大小時，它會放置一個水平捲軸。

透過使用這種方法，您還可以跳過使用標籤<meta name="viewport" content="width=device-width, initial-scale=1" >（儘管不建議）

希望這可以幫助！

相關內容