iT邦幫忙

0

Dev tools無法顯示手機的版本?

#devtool #前端 #rwd
liuc772 2022-11-07 23:42:07 ‧ 928 瀏覽

  • 分享至 

  • xImage

https://ithelp.ithome.com.tw/upload/images/20221107/20153970egijyVRVb8.png
如題

我在Chrome的Dev tools點擊切換成手機板
不管調整為什麼牌的手機
它都只是網頁版的形式而已
如圖中的Youtube還是為網頁版形式
如何顯示成以下這樣呢?
https://ithelp.ithome.com.tw/upload/images/20221107/20153970ItY7bQbqzn.png

看更多先前的討論...收起先前的討論...
froce iT邦大師 1 級 ‧ 2022-11-08 10:12:40 檢舉
看不太懂，你所謂的手機版是變成android或是iphone上的app?
那當然不會啦，網頁就是網頁，用網頁開發器選裝置只是選裝置的螢幕解析度，網頁開發器當然還只是debug網頁的工具而已。
wjing iT邦新手 1 級 ‧ 2022-11-08 10:25:30 檢舉
應該是想用Chrome開發工具開啟手機的Youtube網頁版?
https://m.youtube.com/

點進網頁版Youtube之前先用開發者工具換成手機-> 再開啟Youtube連結
窮嘶發發發 iT邦高手 1 級 ‧ 2022-11-08 10:51:05 檢舉
你切換成手機板之後，畫面上方會有工具列，預設是回應式 (RWD) 你要點這裡之後下方會出現手機清單，你要選你要預覽的型號之後就會出現那個手機型號的預覽畫面，或是直接改解析度也行
還有就是很多網站有所謂的手機版，他會偵測實際的手機型號，你用電腦去看，他直接抓型號抓不到不會切換過去而是以實際的螢幕寬度來顯示，你這邊的調整是無效的，你必須嘗試改變視窗寬度來讓這種網站顯示不同解析度的效果
針對這種網站推薦另外一個外掛
User-Agent Switcher for Chrome
這個，可以直接切換自動回應給網站移動裝置型號，就會自動切到行動版顯示了
liuc772 iT邦新手 5 級 ‧ 2022-11-08 11:21:40 檢舉
你們仔細看我第一張圖的左上角，已經是IPhone SE了，但畫面還是網頁版本的形式
窮嘶發發發 iT邦高手 1 級 ‧ 2022-11-08 11:44:01 檢舉
你仔細看我後面的說明，某些網站就是會這樣
你只能用外掛改 VIEWPORT 的SIZE
或是強制指定型號
wjing iT邦新手 1 級 ‧ 2022-11-08 11:57:19 檢舉
Youtube的話，F12重新整理應該就會導到手機版了
liuc772 iT邦新手 5 級 ‧ 2022-11-15 17:16:04 檢舉
我知道了 謝謝你們
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2022-11-08 22:21:50

你要先知道一件事。手機版上有很多會自動連結對應的APP。
這是在PC中無法做到的。

真正想要測手機版的特定功能。
一般來說第一當然是直接拿手機了。(我再講廢話)

要不然就是裝個安卓模擬器(如、N啥的、雷啥、B啥...)
不過想測試IOS應的話就會比較麻煩就是了。
我個人是省事直接拿一台IPAD來當測試機用。

MAC電腦好像可以直接模擬的樣子。(我沒MAC，去問有MAC的人)

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙