分享方式:


裝置模擬

[Edge DevTools: 瀏覽器] 索 引卷標中,底部的 [裝置模擬] 工具列可讓您模擬不同的環境:

延伸模組中的瀏覽器預覽,其中顯示模擬工具列

若要重現此處顯示的 UI,請參閱在開啟 DevTools 和 DevTools 瀏覽器中以滑鼠右鍵按下 HTML 檔案來開啟 DevTools。

另請參閱:

模擬裝置下拉功能表

在 [ 模擬裝置 ] 下拉功能表中,您可以從許多不同的裝置或 [回應] 的預設選項中選 。 當您選取裝置時,檢視區會調整為正確的度量,並模擬觸控介面。 例如,有數個仿真的iPhone版面配置:

擴充功能中的瀏覽器預覽,顯示模擬手機版面配置中的 Web 產品

寬度和高度下拉功能表

若要變更檢視區維度,請單擊 [ 寬度 ] 和 [ 高度寬度] 和 [高度] 圖示 下拉功能表:

寬度和高度下拉功能表

旋轉按鈕

按兩下 [ 旋轉 ] 按鈕 ([ 旋轉] 按鈕) ,以在直向和橫向之間旋轉檢視區:

旋轉為橫向的檢視區

[模擬 CSS 媒體功能] 按鈕

使用 [ 模擬 CSS 媒體功能] 按鈕 (模擬 CSS 媒體功能) :

  • 模擬 CSS 媒體查詢。
  • 測試產品在列印模式中的外觀。
  • 在深色和淺色模式之間切換。
  • 模擬強制色彩。

延伸模組中的瀏覽器預覽,以強制色彩模式顯示 Web 產品

模擬視覺缺陷按鈕

按兩下 [ 模擬視覺缺陷 ] ([ 模擬視覺缺陷] 按鈕) 按鈕,以測試具有不同視覺缺陷的目前網頁用戶體驗。 這個按鈕可讓您以模糊模式或不同色彩缺陷測試產品:

延伸模組中的瀏覽器預覽,在模糊的模擬中顯示 Web 產品

另請參閱