[教學]如何在電腦版的google chrome瀏覽器上面看手機版網頁

分享文章:

簡單來說就是用電腦的瀏覽器看手機板網頁,不使用模擬器

雖然有些網頁會提供手機版網頁的連結,但很多都是沒有提供的

~~~萌萌噠的分割線醬~~~

首先打開google chrome瀏覽器,在你想要看的網頁上按下F12

[教學]如何在電腦版的google chrome瀏覽器上面看手機版網頁

然後在右上角的小正方形圖案點下去,可以看到已經變成手機板的大小惹

[教學]如何在電腦版的google chrome瀏覽器上面看手機版網頁

不過網頁還是電腦版的格式,怎麼辦?

很簡單,只要按下右鍵,重新整理之後網頁就會變成手機板的格式了~

[教學]如何在電腦版的google chrome瀏覽器上面看手機版網頁

不過要注意的是右邊的原始碼視窗不能關掉,不然網頁會整個走型變得非常大~

▶除了上述方法外,還可以使用Chrome擴充功能來模擬手機瀏覽器。例如,”User-Agent Switcher for Chrome”擴充功能可以切換瀏覽器的User-Agent,讓網站誤以為你是使用手機瀏覽器,從而載入手機版網頁。這種方法的好處是可以自由設定User-Agent,也可以儲存自己常用的User-Agent設定。

小技巧與應用

功能作用
快捷鍵F12Ctrl + Shift + I 可快速開啟開發者工具
切換解析度可選擇不同裝置型號來模擬不同解析度
橫向/直向切換點擊旋轉按鈕來模擬手機橫向顯示效果
強制重新整理頁面切換裝置模式後若無法即時顯示,可按下重新整理按鈕

常見問題與解答 (FAQ)

  1. Q: 為什麼我切換裝置模式後,還是看到桌面版的網頁?
    • A: 有時候網站會強制跳轉到桌面版。你可以試著清除快取,或在重新載入時按下 Ctrl + Shift + R(硬重新載入)來刷新頁面。
  2. Q: 我可以測試不同解析度的顯示效果嗎?
    • A: 當然可以!在裝置模式的下拉選單中選擇不同的裝置,或者直接手動設定解析度即可。
  3. Q: 是否可以在開發者工具中預覽網站在平板上的顯示效果?
    • A: 可以,開發者工具提供許多不同型號的模擬裝置,包括手機和平板電腦。選擇適合的型號即可。
  4. Q: 我能不能直接在這裡測試觸控操作?
    • A: 雖然你可以模擬觸控操作,但真實的觸控行為還是需要在真實的觸控裝置上進行更準確的測試。

分享文章:

4 Comments

  1. 蚊蚊

    謝謝你的無私分享(ง •_•)ง,加油

    • 版主

      感謝支持(,,・ω・,,) 星夢月影 於 2021/02/23 21:22 回覆

  2. 訪客

    請問如果關掉右邊的原始嗎視窗,手機版畫面變得很大,請問如何變回正常的電腦版畫面呢

    • 版主

      把原始碼關掉再重新整理一次就會回到正常的電腦版畫面惹

      星夢月影 於 2022/05/23 13:55 回覆

Comments are closed