使用CSS處理網站在不同裝置上的顯示方式

現在可以連上互聯網的裝置越來越多，而且各個裝置的闊度也有所不同，在設計網站時經常要為不同闊度作出調整。
針對這個問題，我們可以透過viewport及media-query來修正網站的顯示方式。

viewport的應用方式
現時大多數的裝置都會將網站的闊度預設為980px，也就是說如果你的網站闊度大於或少於980px，將會無法完整地顯示整個網站。
在這個情況下，我們需要透過viewport來告訴裝置網站實質的闊度，例如我們的網站是720px，可以這樣設定viewport:

<meta name="viewport" content="width=720">

那麼裝置就會完整地顯示整個網站。

透過viewport取得裝置的實際闊度

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport的各個特性
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
initial-scale=1，告訴裝置以100%顯示網站，不做任何的自動縮放，這時將需要手動移動或縮放頁面。
user-scalable=no，禁止用戶手動縮放網站。
maximum-scale=1，設定網站最大的縮放大小。

使用viewport及media-query來調整網站的顯示方式
首先我們使用viewport來告訴網站，現在使用者的裝置實際的闊度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然後，我們再透過css的media-query針對不同的闊度設定不同的顯示方式:

@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}

@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
}

@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
}

@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
}

@media all and (max-width: 240px) {
    /* styles for smaller devices */
}

使用這個方式的相關網站
http://www.microsoft.com/surface/en-US/surface-with-windows-rt/home
http://anderssonwise.com/