簡單來說就是用電腦的瀏覽器看手機板網頁,不使用模擬器
雖然有些網頁會提供手機版網頁的連結,但很多都是沒有提供的
~~~萌萌噠的分割線醬~~~
首先打開google chrome瀏覽器,在你想要看的網頁上按下F12
![[教學]如何在電腦版的google chrome瀏覽器上面看手機版網頁](https://techscomet.com/wp-content/uploads/__pic_pimg_tw_asd0961296920_1608890726-407930728-g_n_png.png)
然後在右上角的小正方形圖案點下去,可以看到已經變成手機板的大小惹
![[教學]如何在電腦版的google chrome瀏覽器上面看手機版網頁](https://techscomet.com/wp-content/uploads/__pic_pimg_tw_asd0961296920_1608890783-3723655797-g_n_png.png)
不過網頁還是電腦版的格式,怎麼辦?
很簡單,只要按下右鍵,重新整理之後網頁就會變成手機板的格式了~
![[教學]如何在電腦版的google chrome瀏覽器上面看手機版網頁](https://techscomet.com/wp-content/uploads/__pic_pimg_tw_asd0961296920_1608890886-1328691120-g_n_png.png)
不過要注意的是右邊的原始碼視窗不能關掉,不然網頁會整個走型變得非常大~
▶除了上述方法外,還可以使用Chrome擴充功能來模擬手機瀏覽器。例如,”User-Agent Switcher for Chrome”擴充功能可以切換瀏覽器的User-Agent,讓網站誤以為你是使用手機瀏覽器,從而載入手機版網頁。這種方法的好處是可以自由設定User-Agent,也可以儲存自己常用的User-Agent設定。
小技巧與應用
功能 | 作用 |
---|---|
快捷鍵 | F12 或 Ctrl + Shift + I 可快速開啟開發者工具 |
切換解析度 | 可選擇不同裝置型號來模擬不同解析度 |
橫向/直向切換 | 點擊旋轉按鈕來模擬手機橫向顯示效果 |
強制重新整理頁面 | 切換裝置模式後若無法即時顯示,可按下重新整理按鈕 |
常見問題與解答 (FAQ)
- Q: 為什麼我切換裝置模式後,還是看到桌面版的網頁?
- A: 有時候網站會強制跳轉到桌面版。你可以試著清除快取,或在重新載入時按下
Ctrl + Shift + R
(硬重新載入)來刷新頁面。
- A: 有時候網站會強制跳轉到桌面版。你可以試著清除快取,或在重新載入時按下
- Q: 我可以測試不同解析度的顯示效果嗎?
- A: 當然可以!在裝置模式的下拉選單中選擇不同的裝置,或者直接手動設定解析度即可。
- Q: 是否可以在開發者工具中預覽網站在平板上的顯示效果?
- A: 可以,開發者工具提供許多不同型號的模擬裝置,包括手機和平板電腦。選擇適合的型號即可。
- Q: 我能不能直接在這裡測試觸控操作?
- A: 雖然你可以模擬觸控操作,但真實的觸控行為還是需要在真實的觸控裝置上進行更準確的測試。
謝謝你的無私分享(ง •_•)ง,加油
感謝支持(,,・ω・,,) 星夢月影 於 2021/02/23 21:22 回覆
請問如果關掉右邊的原始嗎視窗,手機版畫面變得很大,請問如何變回正常的電腦版畫面呢
把原始碼關掉再重新整理一次就會回到正常的電腦版畫面惹
星夢月影 於 2022/05/23 13:55 回覆