更新日期：2014-12-07

以往網站設計會為了手機版，需要另外製作一個獨立的網站，但是這樣子要同時維護兩個網站，相當耗費時間。因此近年延伸出 RWD (Responsive Web Design) 的概念，也就是所謂的響應式設計。同一個網站，會隨著使用者的裝置解析度不同，網站會呈現不同的樣貌。

 

嚴格來說，若是網站分電腦版和手機版，表示它的 url 是不同的，也就是手機版會另外設計成一個獨立的網站，樣貌呈現完全不同，只是內容的來源會跟電腦版的內容一樣(例如標題和內容都一樣)。
 
而現在大部分的 wordpress 佈景也都會順便加入 RWD 設計，它的方法就是利用 css 樣式表，以 @media 語法，判斷使用者的行動裝置解析度大小加以變動寬度等等樣式。
 
舉個例子：
[code language=”css”]
@media screen and (max-width:480px) {
/* 意思是畫面解析度最大到 480px 都要用此樣式 */
}
@media screen and (min-width: 800px) {
/* 意思是畫面解析度最小到 800px 都要用此樣式 */
}
@media screen and (min-width: 481px) and (max-width: 799px) {
/* 意思是畫面解析度在 481px ~ 799px 都要用此樣式 */
}
[/code]
 
所以網頁程式是同一個的，因此以 RWD 設計方式，不應該再分電腦版或手機版。
 
不過隨著手機螢幕解析度越來越大，甚至現在出現 2K(2560×2140) 解析度的手機，這樣未來再用 css 再去判斷就會失去意義了，所以嚴格來說，應該要回歸到用程式去判斷瀏覽器的種類，也就是用 HTTP_USER_AGENT 訊息，來判斷使用者到底是用一般電腦觀看？還是用手持裝置觀看？因為瀏覽器會給server一些相關訊息，這樣子判斷比較準確。
 
在 wordpress 裡面也提供了一個判斷是否是手持裝置的語法：wp_is_mobile

用法：

[php]
if ( wp_is_mobile() ) {
/* 顯示mobile的東西 */
}
[/php]
所以我們可以利用這個方式，來載入不同的css樣式檔，兩種判斷方法，一樣也可以呈現美好的 RWD 效果。
(備註：wp_is_mobile 從 3.4 版開始使用)