移動浏覽器中的viewport與MediaQueries中的width和device-width

什麼是viewport

傳統的web頁面在開發時，通常考慮的是頁面在PC端浏覽器中的展示狀況而不會考慮在移動裝置上的展示效果。為了解決傳統頁面在螢幕分辨率遠小于PC的移動裝置上的Web展示問題，Apple Safari首先定義了viewport虛拟視窗，其預設大小為980像素（大部分網站的标準寬度）。移動Safari在顯示頁面時，會首先在虛拟視窗中完成Web頁面的展示，然後按一定的比例縮小。也就是說，當開發者沒有定義viewport虛拟視窗大小的情況下，浏覽器先以980像素的浏覽器标準加載網頁，然後再以一定的比例縮小，這是一個整體的縮小過程，頁面上的所有元素都會縮小。經過縮小，頁面上的各部分都會因為太小而不容易浏覽，是以開發者通常需要制定viewport的大小，如

<meta name="viewport"content="width=device-width initial-scale=1,user-scalable=0" />

這裡将viewport寬度改變為裝置寬度device-width，這樣頁面一開始就能在裝置大小的虛拟視窗内進行加載而不需額外的縮小了。除了Safari浏覽器，其他浏覽器也支援viewport虛拟視窗。

但是，大家可以想象，如果不對頁面做額外的處理，單純将viewport大小設為裝置大小，出來的效果也是不佳的，就好比在PC桌面浏覽器上浏覽的網頁中某個元素的width被設定成了5000px。而Media Queries就是為了解決這個問題而來的。

什麼是Media Queries

Media Queries就是媒體查詢，是CSS3規範的一部分，簡言之就是判斷目前媒體裝置的類型進而決定采取何種樣式，其文法是

@media [media_query] media_type and media_feature

使用Media Queries樣式子產品必須以@media開頭

Media_query是查詢關鍵字，可以是not或only

media_type指定裝置類型

media_feature是判斷條件，其決定是否啟用該樣式

如：

@media only screen and (max-width:400px) {

    #navbar {

        float: none;

        width: 400px;

    }

}

其表示當在有螢幕的裝置上，且浏覽器寬度不超過400px時應用其大括号内的樣式。此外還可以根據裝置螢幕寬度來決定樣式，如:

@media only screen and (max-device-width:400px) {

    #navbar {

        float: none;

        width: 400px;

    }

}

而什麼時候用width什麼時候用device-width是比較容易混淆的，加上在viewport的設定裡也有個device-width，就更混亂了，下面做下總結：

1.                .width是指浏覽器的視區寬度，即浏覽器視窗的寬度，也就說在pc浏覽器上，你拖動浏覽器視窗改變大小會使Media Queries的判斷結果發生改變，進而使用不同的樣式。

2.                而device-width是指裝置的寬度，即螢幕的實際寬度，因為不是每個人都會全屏地使用浏覽器（特别是PC桌面端），如果你希望在浏覽器大小變化時樣式也跟着改變則width是你更好的選擇。

但是，對于總是全屏顯示的移動端浏覽器來說，當你在Media Queries中用width時可能希望它與device-width是一樣的。不過不要忘了，移動端浏覽器會先在viewport虛拟視窗裡加載頁面，是以當你不幸地沒有設定viewport大小時，Media Queries還是以預設視區大小（980px）與你的max-width或min-width比較，進而展示出桌面版本。這時候需要在meta裡指定viewport的寬度為device-width，這樣就能在Media Queries中放心使用width了。