有時候會被別人問起pc端和手機端有什么區別。一般來說都會去說，兼容性啊，適配啊，網頁布局這方面的事情，但是我覺得這個問題如果想要拿一個滿分應該從區別出發，從如何判斷收尾。畢竟你只知道區別沒有用，他可能更想讓你說出來你是怎么判斷的。
像是面試的時候如果你自己主動說出來扯一堆王八犢子也很能拖延時間。說不定會給面試加分。
從區別入手
Pc端需要考慮的是瀏覽器的兼容性，不能局限於我們常用的谷歌瀏覽器，要為客戶那邊考慮，而手機端需要為不同的型號做考慮，安卓ios華為。同時也要更多考慮手機分辨率的適配。不同操作系統的細微差異。
在布局上，手機端因為要去做布局的自適應，所以可以圍繞rem去說一說
關於接口上，手機端會多出很多常見功能，比如微信的支付接口，微信的朋友圈轉發，分享文章什么的，支付寶的支付接口，包括高德地圖百度地圖的這些接口，都是做app會常用的，如果你是一個經驗豐富的前端。這里會鞏固你的項目經驗。
Pc端和手機端在事件處理上區別不大，pc端沒有觸屏，手機端沒有懸停事件，同時手機端多了一個鍵盤的彈出。
動畫效果處理上，pc常用js去做動畫，手機端去做動畫特效會更傾向使用css3
同時相較用戶來說，因為觸屏的操作尺度非常大，所以在圖標和按鈕的處理上會更傾向於放大一些讓用戶有一個更好的視覺體驗。
關於如何辨別是pc端還是手機端
這里參照了阮一峰老師9月份的文章，我上網找資料的時候發現很多人不會標注原作者直接轉載。只能說阮一峰老師一個人養活了很多博客主。
目前來說比較常用的是通過js去拿navigator.userAgent這個屬性，這是一個字符串，如果里面包含mobi，andorid，iphone等關鍵詞就可以判斷為移動設備。
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
// 當前設備是移動設備
}
// 另一種寫法
if (
navigator.userAgent.match(/Mobi/i) ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/iPhone/i)
) {
// 當前設備是移動設備
}
然后有一個更簡單的方法就是通過屏幕寬度判斷是否為手機。直接獲取window.screen。由於手機端屏幕普遍干不過電腦端，所以可以很簡單的去識別是否為手機。
Window還提供了一種方法為window.orientation，這個屬性用於判斷手機是否是橫屏，如果不是移動設備的話你獲取這個屬性會返回undefined。
第四種是觸發touch事件，通過trycatch去為手機端的dom元素執行touch事件，如果捕獲異常則證明是pc端。
其他的可以通過各種工具包輪子去判斷。常用方法大概就這幾種。