- 02-02 – 配置Viewport
第二部分 – 第02章
針對移動設備進行優化的網站頁面均在head部分配置了viewport 。
Viewport
設想viewport是一個顯示網站頁面的窗口。如今，用戶在不同屏幕尺寸的設備上訪問網站頁面。為了使你的網站頁面正確地在用戶面前展示，通過一個適當配置的viewport可以明確將要顯示的窗口大小。
讓我們明確Viewport相關參數和取值：
width=device-width, initial-scale=1
完整的viewport META標籤合起來如下：
<head> <meta name=viewport content="width=device-width, initial-scale=1"> </head>
- width是設備上虛擬視圖的寬度。
- device-width是指設備屏幕的物理寬度。
- initial-scale是被訪問時網頁的初始縮放大小。 1或1.0意味著“不進行縮放”。
沒有配置Viewport vs. 有配置Viewport
讓我們證明為移動設備/屏幕配置合適的viewport的重要性。
示例：沒有配置Viewport
這個頁面沒有配置viewport。段落內的文字（例如，在標籤<p>內）均太小了以致無法閱讀。
示例：有配置Viewport
這個網站頁面合理配置了viewport。現在段落內的文字（例如，在標籤<p>內）均可以閱讀了。
為HTML5頁面增加Viewport
讓我們為網站頁面的HTML代碼加上viewport。
<!doctype html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.example.com/css/stylesheet.css"> <script src=" http://www.example.com/js/scripts.js"></script> </head> <body> <h1></h1> <p></p> </body> </html>
- 上一章：用HTML5開發移動網站
- 下一章：選擇和註冊域名
移動網站性能技術白皮書在2017年3月正式出版。
英文版：Configure Viewport – 簡體中文版：配置Viewport
移動網站性能技術白皮書上的內容按下列許可協議發布：CC Attribution-Noncommercial 4.0 International
