響應式網站設計基本觀念(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。
