在進行網頁設計時,就不能只考慮到螢幕解析度,還必須兼顧螢幕尺寸。
viewport 指的是螢幕解析度,iOS 和Android 3.X 以上版本內建的瀏覽器將viewport 的寬度預設為980 像素,而桌上型電腦的viewport 則是設定為瀏覽器畫面。當我們將viewport 設定為裝置的螢幕解析度時,解析度的大小將會影響所顯示的範圍,如圖( 一)、圖( 二) 是分別在iPad Air 和iPad Mini 顯示相同照片的結果。
為了讓相同項目的內容在不同尺寸和不同解析度的螢幕上看起來差不多,於是衍生出density ( 密度) 的概念,只要根據density 來設定viewport,也就是將螢幕解析度除以density,就可以在不同尺寸和不同解析度的螢幕上顯示相同項目的內容,以下列出一些行動裝置的螢幕規格供參考。
回應式網頁設計的重點之一是要根據density 來設定viewport,可以在HTML 文件中加入第06 行的 <meta> 元素,將viewport 設定為裝置的螢幕寬度。