[Android][CSS] 利用電腦跟手機上的瀏覽器大小不同，分別載入對應的CSS樣式檔。

最近謝晒開始研究如何建置手機版的網頁，因為電腦跟手機的螢幕大小差很多，有些人會在原本的網站之外，再寫一個專供手機瀏覽的網站，這樣的作法實在不符合謝晒懶惰不作重複工作的個性。
其實只要製作一個合適手機螢幕瀏覽網頁的 CSS 樣式檔，就可以利用原本網站的內容，而不用再另外寫一個手機版專屬網站了，但是要如何讓網站判斷套用哪一個樣式檔呢?就要利用使用者的螢幕大小去做判斷了...

假設我們的網站原本的CSS樣式檔是 desktop.css ，而手機版專用的 CSS 樣式檔為 mobile.css ，網頁head的部分要加入以下程式碼
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width:481px)" />
當瀏覽器大小最大只有 480px 時，則套用手機版的 CSS 樣式檔 mobile.css
當瀏覽器大小可以超過 481px 時，則套用電腦版的 CSS 樣式檔 desktop.css
註：為什麼是480px？因為智慧型手機的螢幕大小以320*480為多數，手機橫放時，寬就是480px。(如果你想讓640px以下都使用手機版css，就改成640和641)

另外，重點來了，光這樣還不能讓一般手機瀏覽器，正確的套用 mobile.css 這支樣式檔，必須再加上這行程式碼
<meta name="viewport" content="user-scalable=no, width=device-width" />
這樣瀏覽器就會乖乖的套用我們特別寫的手機版樣式檔啦。

備註：
IE 瀏覽器無法解讀上面的程式碼，所以，我們必須加入以下程式碼
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="desktop.css" media="all" /> <![endif]-->
因為手機上的瀏覽器不會是 IE，所以只要用 IE 瀏覽器讀取網頁，都套用電腦版本的樣式檔。


補充資料：
自適應網頁設計（Responsive Web Design）　
[CSS] Media Query 小撇步