在 wordpress 常見的RWD設計方法

更新日期:2014-12-07

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

 

嚴格來說,若是網站分電腦版和手機版,表示它的 url 是不同的,也就是手機版會另外設計成一個獨立的網站,樣貌呈現完全不同,只是內容的來源會跟電腦版的內容一樣(例如標題和內容都一樣)。
 
而現在大部分的 wordpress 佈景也都會順便加入 RWD 設計,它的方法就是利用 css 樣式表,以 @media 語法,判斷使用者的行動裝置解析度大小加以變動寬度等等樣式。
 
舉個例子:

@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 都要用此樣式 */
}

 
所以網頁程式是同一個的,因此以 RWD 設計方式,不應該再分電腦版或手機版。
 
不過隨著手機螢幕解析度越來越大,甚至現在出現 2K(2560×2140) 解析度的手機,這樣未來再用 css 再去判斷就會失去意義了,所以嚴格來說,應該要回歸到用程式去判斷瀏覽器的種類,也就是用 HTTP_USER_AGENT 訊息,來判斷使用者到底是用一般電腦觀看?還是用手持裝置觀看?因為瀏覽器會給server一些相關訊息,這樣子判斷比較準確。
 
在 wordpress 裡面也提供了一個判斷是否是手持裝置的語法:wp_is_mobile

用法:

if ( wp_is_mobile() ) {
  /*  顯示mobile的東西 */
}

所以我們可以利用這個方式,來載入不同的css樣式檔,兩種判斷方法,一樣也可以呈現美好的 RWD 效果。
(備註:wp_is_mobile 從 3.4 版開始使用)

發佈留言