響應式網站設計基本觀念(3):Viewport & Pixels
深入了解"螢幕大小"的定義與單位。
1. Viewport是甚麼:
之前討論RWD說到的”螢幕大小”,其實就是指Viewport。
Viewport就是”設備螢幕顯示網頁內容的區域”,更具體的說,就是”瀏覽器顯示網頁的區域”。在電腦螢幕上,可以操作滑鼠任意改變瀏覽器網頁大小,改變viewport。
一般網頁都是為了電腦螢幕觀看所設計,電腦螢幕的viewport本來就大於行動設備的viewport,解析度也比行動裝置高。
為了使行動設備可以正常顯示網頁,其瀏覽器Viewport寬度都自動設定為980px或1024px(或其他)。此時”自動設定的Viewport寬度”大於”瀏覽器Viewport寬度”。導致出現橫向滾動條。
認識完Viewport的定義,接下來介紹Viewport的測量單位。你可能以為是公分,但不是公分。
2. pixel
Pixel(=px),在介紹它跟Viewport的關係之前,先釐清它在各個情境當中代表的意涵:
(1)實體像素與 PPIs:
又叫硬體像素,是螢幕上最小的發光硬體單位,PPIs是指每寸硬體像素數(pixels per inch)。當PPIs高,表示硬體像素密度越高、硬體像素越小,呈現出的螢幕畫面就越清晰不模糊。手機銷售時會比較這個。
(2)螢幕解析度:
指一個螢幕能容納的實體像素面積。像一台電腦螢幕,解析度是1920*1080;一台iphone11解析度是1792*728,其實都很接近了。
當我們看Youtube 720p的影片時,是指播放1280*720的影片,所以p就是指垂直方向的實體像素數。而目前最夯的4K電視,指的是具有3840*2160實體像素數的螢幕。
由於繼續講下去會講不完,在此提供幾個好的解說連結:
迷思破解 2K? 4K? FULL HD? 電腦(電視)螢幕? 解析度?
影片解析度全解釋:4K、2K、1080P、720P是什麼?4K電視、手機、攝像 機等解析度
(3)CSS中的像素:
是本章討論重點。使用CSS開發網頁時,拿來形容長寬的單位,是一個無視裝置差別而等長的測量單位。它是由WWW(world Wide Web,W3C)所創立的抽象名詞。
在以前,實體像素和CSS像素是1:1的關係,但隨著科技進步,每台裝置的像素密度沒有一定的標準,舉例來說:iphone3時實體像素和CSS像素是1:1;iphone4的時候進化成Retina螢幕,螢幕尺寸不變,但是實體像素增加一倍,和CSS像素是2:1,即2個實體像素等於1個CSS像素。
有的行動裝置與桌面瀏覽器的螢幕有”像素比”(devicePixelRatio)的屬性,意思等同於”實體像素/獨立像素”的比值,CSS像素可以把它看成一種獨立像素,例如:iphone3像素比是1,iphone4是2,每種設備都不盡相同。
3. 設定網頁viewport寬度:
再深入講解,電腦螢幕瀏覽器的viewport又叫layout viewport,行動設備的viewport又叫visual viewport。當我使用行動設備去瀏覽專為電腦螢幕設計的網頁時,因為layout view寬度大於visual viewport,因此會出現橫向滾動條,這個對於閱讀者很不便;所以必須要有一個配合行動設備寬度、字體大小因應而生的viewport — ideal viewport,使閱讀者在不用縮放、移動滾動條,就可以輕鬆閱讀網頁內容。
因為上述原因,想得到ideal viewport,需要設定網頁的viewport寬度。
如何設定寬度呢?在HTML的<head>加入:
<meta name="viewport" content="width=device-width, initial-scale=1">
裡面包含兩種屬性:
width=device-width 讓當前的viewport寬度等於設備寬度initial-scale=1 讓裝置實體像素:CSS像素=1:1
運用後,成為閱讀的最佳ideal viewport。裝置不允許縮放、當然也沒有橫向滾動條可以調整。
推薦補充資料:viewport 深入理解
Q:如果將width=320p…?
A:頁面的寬度會維持在320p,如果拉寬網頁頁面,網頁內容也會被拉大拉寬。所以最好的方式,還是設成width=device-width。
★viewport小統整:
網頁多以電腦螢幕所顯示的瀏覽器來設定viewport,而行動裝置viewport沒那麼大,顯示出來的網頁可能呈現縮放或是有橫向滾動條,對閱讀者來說很吃力。若在網頁<html>的<head>標籤中增加上述程式碼,把寬度設定成”隨著設備寬度變化”,就可呈現最適閱讀的ideal viewport。