第 3 章 回應式網頁設計
∗ 網頁設計
▸ 早期
✶ 使用者利用桌上或筆記電腦瀏覽網頁
✶ 網頁寬度設為固定，使所有螢幕呈現相同風格
✶ 寬螢幕左右會有空白邊界
▸ 近期
✶ 使用者利用手機與平板電腦瀏覽網頁
✶ 針對桌上型電腦所設計的網頁在手機上瀏覽會有許多問題
▸ 解決方案：
✶ 利用 HTML5 與 CSS3 做回應式網頁設計 (Responsive web design，亦稱為「響應式網頁設計」)
✶ 網頁依據不同的視域 (Viewport) 尺寸自行調整結構
# 視域：瀏覽器中可以呈現內容的區域，不包括標題、工具列、頁籤、及其他
# 視域尺寸與螢幕尺寸不同
✶ 伺服器後端不需要做任何處理
(1) 回應式網頁設計
∗ 為何手機重要
▸ 依據 Net Market Share 的瀏覽器統計，手機及平板電腦瀏覽器已大幅成長
∗ 手機瀏覽傳統網頁的問題
▸ 需要放大或縮小頁面才能看清楚相關訊息
▸ 需要滑動頁面才能看到目標訊息 (一行文字經常太長)
▸ 按鈕或連結太小難以操作，導致常常點錯
∗ 解決方案之一：設計手機專用網頁
▸ 優點：
✶ 可依據不同手機的特性、地點、或連接速度等提供不同的內容、設計、或互動網頁
✶ 網頁建置速度快
▸ 缺點：
✶ 網頁修改不易
✶ 網頁搜尋引擎最佳化較差
✶ 需要維護多個網頁，維護成本及錯誤率均提高
∗ 較佳的解決方案
▸ 相同的網頁內容，但依據視域的特性做頁面結構的調整，例如：
✶ 在小視域中，將較不重要的元素移到主要項目之下
✶ 或許在更糟的狀況下：乾脆將元素隱藏，變成另一個連結
✶ 將導覽按鈕大小調整為適合手指點選的尺寸，而非固定尺寸
✶ 網頁佈局依據可讀性來縮放
✶ 一段文字的長度彈性調整，不需左右滑動螢幕
∗ 回應式網頁 (Responsive web)定義
▸ Ethan Marcotte 於 2010 年的 Responsive Web Design 文章中提出此名詞
▸ 將以下 3 種技術整合為統一的方法，稱為回應式網頁設計 (Responsive web design)
✶ 彈性網格布局 (Flexible grid layout)
✶ 彈性影像 (Flexible image)
✶ 媒體及媒體查詢 (Media and media queries)
▸ 其他名稱：fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, and flexible design
∗ HTML5 與 CSS3 進一步提昇回應式設計的功能
▸ HTML5 比 HTML4 功能強大許多
▸ 瀏覽器支援 HTML5 的比較
▸ CSS3 的許多進階功能可以提供更多的彈性，因此大片的背景影像及複雜的 JavaScript 都可以丟掉了，取而代之的是輕量級的 CSS3 梯度 (Gradient)、陰影 (Shadow)、排版 (Typography)、動畫 (Animation)、以及轉換 (Transformation) 等
(2) 回應式網頁設計範例
∗ 回應式網頁測試方法
▸ 利用螢幕尺寸轉換工具
✶ IE： Microsoft Internet Explore Developer Toolbar
✶ Safari：Resize
✶ Firefox：Firesizer
✶ Chrome： Windows Resizer
▸ 建立 顯示視域尺寸之 HTML 檔：screenSize.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Browser viewport size tester // benfrain.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>The benfrain.com super simple, what size is my viewport page?</h1> <h3>Viewport width: <span id="width"></span></h3> <h3>Viewport height: <span id="height"></span></h3> <script src="https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script> <script src="js/screenSize.js"></script> </body> </html>
▸ 建立 <...>/js/ 目錄，並建立 js/screenSize.js 檔案，內容如下：
$(document).ready(function(e) {
showViewportSize();
$(window).resize(function(e) {
showViewportSize();
});
function showViewportSize() {
$('#width').text($(window).width());
$('#height').text($(window).height());
}
});
