響應式設計 - 從 viewport 開始 1/3

RWD 系列文章 》

由於螢幕尺寸的差異,以桌機螢幕為基礎設計的網頁,在預設的情形下並沒有辦法適當的在行動裝置螢幕上適當的呈現,考慮以下的配置:



這個網頁內容呈現一段文案與一張圖片,在大尺寸螢幕上很容易檢視,而同樣一個網頁於小尺寸手機上則會變成難以閱讀。在預設的情形下,4 吋手機螢幕大致會以980px的預設寬度顯示網頁內容,為了將此寬度的網頁內容完整呈現出來,導致其中的文字過小無法閱讀,如以下左圖。


為了解決呈現的問題,可以在網頁開始區塊裏,利用 meta 標籤加上 viewport 設定,如此一來便能強制網頁以手機螢幕寬度進行呈現,結果如右圖。

現在回到上述的網頁內容配置,列舉如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>   
    <title></title>   
</head>
<body>
    <h1>有一種愛叫作遺憾</h1>
    <p>
        遺憾,沒有一對戀人希望遇見
    </p>
   
    <img src="images/DSC0116.jpg" />
</body>
</html>

這是本文一開始正常呈現的網頁內容,現在於 head 標籤區塊範圍內加以下的 viewport 設定:

<head>
<meta charset="utf-8"/>   
<meta name="viewport"  content="width=device-width"  >
    <title></title>   
</head>

其中的 name="viewport" 表示這是一行 viewport 的 meta 資料設定,接下來的 content內容表示要求網頁以呈現此網頁的裝置寬度為基礎呈現此網頁。完成此行設定,接下來瀏覽器網頁就會裝置的尺寸來呈現網頁。


沒有留言: