蝦的放空魔域

RWD 最佳夥伴：Viewport & Media query 

網頁顯示在手機上，預設會把整張網頁都秀出來，
想當然爾，一個 1024 px 寬的網頁，塞在 320 px 左右寬的手機螢幕下，
看起來就會小小的。

設定 viewport ，可以告訴瀏覽器，
在讀取 html 時要用多大的面積來顯示這張網頁。

其中最常見，就是將 viewport 設定為 device-width，
如此一來，就可以讓網頁用手機螢幕的寬度來呈現。

再搭配 media query 和 CSS 的設定，就能讓同一張網頁，
在桌面及手機上都可以有相對應的良好體驗。

Viewport 語法

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

width：可設定數值，或者指定為device-width
height：可設定數值，或者指定為device-height
initial-scale：第一次進入頁面的初始比例
minimum-scale：允許縮小最小比例
maximum-scale：允許放大最大比例
user-scalable：允許使用者縮放，1 or 0 (yes or no)

screen-width? device-width?

螢幕解析與裝置寬度不一定是一致的。
以 iPhone5 來說，螢幕解析度是 960，但寬度是 320。
若不希望網頁在手機上看起來是小小的，還是以裝置寬度才能達到目的。

Media queries 

在現今這種多裝置瀏覽雲端及網頁的時代，
電腦已不再是惟一的選項，手機、平板、筆電...等等，
都可能是使用者會用來瀏覽內容的工具。

透過 Media Queries 的語法設定，則可以讓網頁在各種不同裝置之間，
都能有相因應的最佳佈局呈現。
 

參考來源：

• Viewport 介紹。
• 響應式設計 - 設定Viewport 參數。