1. 程式人生 > >HTML之meta&&響應式佈局

HTML之meta&&響應式佈局

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*

480,B顯示器1200*480,AB顯示器長寬相同。那麼圖片在A顯示器上剛好鋪滿,每個畫素點很大,圖片很粗糙,在B顯示器上不能鋪滿,每個畫素點比較小,圖片比較清晰。

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在手機螢幕中差不多鋪滿螢幕。