meta

在head標籤中的meta標籤,可以為HTML文件提供額外資訊
meta屬性主要分為兩組
1.name屬性與content屬性
name屬性用於描述網頁,它是以名稱/值形式的名稱,name屬性的值所描述的內容(值)通過content屬性表示,便於搜尋引擎機器人查詢,分類.其中最重要的是description,keywords
2.http-equiv屬性與content屬性
http-equiv屬性用於提供HTTP協議的響應頭報文(MIME文件頭),它是以名稱/值形式的名稱,http-equiv屬性的值所描述的內容(值)通過content屬性表示,通常為網頁載入前提供給瀏覽器等裝置使用.其中最重要的是content-type charset 提供編碼資訊,refresh重新整理與跳轉頁面,no-cache 頁面快取,expires網頁快取過期時間.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="5; url=http://www.dreamdu.com/" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" />
<meta http-equiv="content-language"
 
 content="zh-CN" />

定義網頁關鍵詞

<meta name="keywords" content="關鍵詞1 關鍵詞2">
多個關鍵詞應該使用空格分開；
最好保持在10個以下，過多的關鍵詞，搜尋引擎將忽略；

定義網頁簡短描述

<meta name="description" content="描述">
應該保持在140-200個字元或者100個左右的漢字；

響應式佈局

畫素和解析度

一張圖片640*480：長640畫素，寬480畫素。單位面積上畫素點越多（即畫素點越小），這圖片就越清晰細膩。但是每一個畫素多少毫米取決於顯示器的解析度。A顯示器640*

viewport

移動裝置上的viewport就是瀏覽器上用來顯示網頁的那部分割槽域。
一般來講，移動裝置上的viewport都是要大於瀏覽器可視區域的，這樣那些為桌面設計的網站也能在移動瀏覽器上正常顯示，帶來的後果就是瀏覽器會出現橫向滾動條。移動裝置預設的viewport是layout viewport。

layout viewport 的寬度是大於瀏覽器可視區域的寬度的，layout viewport的寬度可以通過 document.documentElement.clientWidth 來獲取；（通常是980px）

visual viewport的寬度是瀏覽器可視區域的大小， visual viewport的寬度可以通過window.innerWidth 來獲取；

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

meta標籤的作用是讓layout viewport的寬度等於裝置的寬度也就是visual viewport的寬度，同時不允許使用者手動縮放。沒有設定meta，css的320px在手機螢幕中大約只有1/3寬。設定了meta，css的320px在手機螢幕中差不多鋪滿螢幕。