# 工程師可以判斷瀏覽網頁的裝置是『移動裝置』還是『電腦』嗎?

## 這篇文章在講什麼?

很多的設計師因為很習慣在出稿子的時候就是出各種尺寸的圖稿，所以多半會認為工程師在判斷裝置是不是手機/電腦時是根據**螢幕/視窗寬度**

所以就有一種固有的觀念:『小版＝移動版』,『大版＝電腦版』。

**但是這實際上是錯誤的**

小版其實指的就只有**螢幕/視窗比較小時, 網頁呈現的樣子**
大版其實指的就只有**螢幕/視窗比較大時, 網頁呈現的樣子**

而實際上現實存在兩種情況：**1**是**比較小的電腦視窗**，**2**是**比較大的移動裝置螢幕**

## 為什麼會有『比較小的電腦視窗』?

> 當然是因為使用者會自己去把視窗拉小啊~

> [color=#c47129]**小常識**：
> **Chrome** 在預設的情況下，如果**沒有**把自適應模式（Responsive mode）叫出來時，最小可以縮放的寬度尺寸是**500**。
> 這意味著**Chrome**在**沒有**把**自適應模式**（Responsive mode）叫出來時，他是沒辦法show出**一般手機尺寸**（320~480左右）的網頁的樣子。

> 順帶一提，**Chrome**的**自適應模式**（Responsive mode）預設上是會被判斷為**移動裝置**的。


## 什麼叫做『比較大的移動裝置』？

像是**ipad Pro(12.9吋款式)**（尺寸是1366*1024），或是某些具備**觸控功能**的**液晶電視**。

上述的兩個例子其實是會內建iOS/Android 系統的，這意味著他們雖然有著較大的螢幕/視窗，但是他卻是（類）移動裝置

## 這篇文章講的例外狀況會怎麼對我的專案帶來影響？

試想一下有一個按鈕，他的用途是點擊之後會叫出對應平台的應用商店介面，用來給用戶下載app軟件用。

假設規格需求上，設計師想要讓只有『移動裝置』才能看得到這顆按鈕，而『桌上型電腦』或『筆記型電腦』則看不到他。

**這就是一個典型的問題狀況。**

某些工程師可能會採用螢幕寬度（例如小於等於1024）來判斷**要不要**顯示這個按鈕。

這樣就會出現一個問題：

1. 使用者A發現在他的『桌上型電腦』，把Chrome視窗縮小到平板1024左右的大小後，出現了該按鈕
2. 使用者B使用ipad pro(12.9吋)來下載時，發現螢幕橫擺的時候，畫面不會顯示該按鈕

## 結論

### 工程師在判斷裝置是『移動裝置』還是『電腦』時的做法？

1. 使用user agent

實際上所有的網頁瀏覽器，都有所謂的User Agent值，這是一個用來判斷瀏覽者使用的裝置/瀏覽器為何的一個字串，當我們在實作像上述的需求時，
有種做法是採用正規表達式判斷User Agent是否有關鍵字串

2. 利用JS判斷media query
https://www.w3schools.com/howto/howto_js_media_queries.asp

> 應該說這個其實沒有完美的解法，需要考量實際情況

### 設計師要怎麼應對上述這種特殊的裝置對應需求？

最好的做法當然就是在Guideline裡面提出有這類需求，並根據是否為移動裝置來繪製圖稿設計。