移动对meta的定义(转)
以下是meta每個屬性詳解
尤其要注意的是content里多個屬性的設置一定要用分號+空格來隔開,如果不規范將不會起作用。
一、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">?? //編碼
META標簽是HTML語言HEAD區的一個輔助性標簽,它位于HTML文檔頭部的標記和 標題 <<標記之間,它提供用戶不可見的信息。meta標簽通常用來為搜索引擎robots定義頁面主題,或者是定義
用戶瀏覽器上的cookie;它可以用于鑒別作者,設定頁面格式,標注內容提要和關鍵字;還可以設置頁面使其可以根據你定義的時間間隔刷新自己,以及設置RASC內容等級,等等。
詳細介紹
下面介紹一些有關 標記的例子及解釋。
META標簽分兩大部分:HTTP標題信息(HTTP-EQUIV)和頁面描述信息(NAME)。
★HTTP-EQUIV
HTTP-EQUIV類似于HTTP的頭部協議,它回應給瀏覽器一些有用的信息,以幫助正確和精確地顯示網頁內容。常用的HTTP-EQUIV類型有:
1、Content-Type和Content-Language (顯示字符集的設定)轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com轉自環 球 網校edu24ol.com
說明:設定頁面使用的字符集,用以說明主頁制作所使用的文字已經語言,瀏覽器會根據此來調用相應的字符集顯示page內容。
用法:<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
<Meta http-equiv="Content-Language" Content="zh-CN">
注意: 該META標簽定義了HTML頁面所使用的字符集為GB2132,就是國標漢字碼。如果將其中的“charset=GB2312”替換成“BIG5”,則該頁面所用的字符集就是繁體中文Big5碼。當你
瀏覽一些國外的站點時,IE瀏覽器會提示你要正確顯示該頁面需要下載xx語支持。這個功能就是通過讀取HTML頁面META標簽的Content-Type屬性而得知需要使用哪種字符集顯示該頁面的。如
果系統里沒有裝相應的字符集,則IE就提示下載。其他的語言也對應不同的charset,比如日文的字符集是“iso-2022-jp ”,韓文的是“ks_c_5601”。
Content-Type的Content還可以是:text/xml等文檔類型;
Charset選項:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集;Content-Language的Content還可以是:EN、FR等語言代碼。
二、<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>//屏幕的縮放
1. viewport:
也就是可視區域。對于桌面瀏覽器,我們都很清楚viewport是什么,就是出去了所有工具欄、狀態欄、滾動條等等之后用于看網頁的區域,
這是真正有效的區域。由于移動設備屏幕寬度不同于傳統web,因此我們需要改變viewport;
實際上我們可以操作的屬性有4 個:
width -???????????? //? viewport 的寬度 (范圍從200 到10,000,默認為980 像素)
height -??????????? //? viewport 的高度 (范圍從223 到10,000)
?
initial-scale -???? //? 初始的縮放比例 (范圍從>0 到10)
?
minimum-scale -??? //?? 允許用戶縮放到的最小比例
maximum-scale -??? //?? 允許用戶縮放到的最大比例
?
user-scalable -??? //?? 用戶是否可以手動縮 (no,yes)
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >
第一個meta標簽表示:
??? 強制讓文檔與設備的寬度保持1:1;
??? 文檔最大的寬度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值);
??? user-scalable定義是否可縮放(0為不縮放),使頁面固定設備上面的大小。
(注意:實際測試中發現,HTC G7自身系統瀏覽器不支持這一條規則,能夠對頁面進行放大,一旦放大響應的box也隨之放大,導致俄頁面出現錯亂問題,解決方法:定義頁面的最小寬度
?min-width,body{min-width: 300px;})
三、<meta name=”apple-mobile-web-app-capable” content=”yes” />? // 離線應用的另一個技巧? ?
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />? // 隱藏狀態欄\
說明:網站開啟對web app程序的支持。?
這里要詳細的介紹一下ios設備對這兩個meta的功能作用(外界通稱該應用為“離線app”,但從字面意思上面會有誤解,以為只能脫離網絡,所以在這里我還是用web app描述。):
該meta可以看出內容為“蘋果設備web 應用程序xx”,就是說該meta是專門定義web 應用的.
說明:
??? 在web app應用下狀態條(屏幕頂部條)的顏色;
??? 默認值為default(白色),可以定為black(黑色)和black-translucent(灰色半透明)。
注意:
??? 若值為“black-translucent”將會占據頁面px位置,浮在頁面上方(會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px)。
糾正:之前查閱了一些資料,說apple-mobile-web-app-status-bar-style屬性為隱藏狀態欄,其實這是一個誤解,在這里為大家糾正一下這個問題。
蘋果web app其他設置:
當然,配合web app的icon 和 啟動界面需要額外的兩端代碼進行設定,如下所示:
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
說明: 這個link就是設置web app的放置主屏幕上icon文件路徑。
使用:
??? 該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
??? 圖片尺寸可以設定為57*57(px)或者Retina可以定為114*114(px),ipad尺寸為72*72(px)
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
說明:
??? 這個link就是設置啟動時候的界面,放置的路勁和上面類似。
使用:
??? 該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
??? 官方規定啟動界面的尺寸必須為 320*640(px),原本以為Retina屏幕可以支持雙倍,但是不支持,圖片顯示不出來。
????? ?
四、<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari頂端的狀態條的樣式?
? ?
<meta content="telephone=no" name="format-detection" />? <meta content="email=no" name="format-detection" />//將不識別郵箱
告訴設備忽略將頁面中的數字識別為電話號碼 ?
?使設備瀏覽網頁時對數字不啟用電話功能(不同設備解釋不同,itouch點擊數字為存入聯系人,iphone為撥打電話),忽略將頁面中的數字識別為電話號碼。
若需要啟用電話功能將telephone=yes即可,具體調用格式可以這樣書寫代碼<a href=”13888888888″>Call Me</a>,若在頁面上面有google maps, iTunes和youtube的鏈接會在ios設備上打
開相應的程序組件。
<meta name="Author" contect="Mr.He"/ > //作者姓名
總結
以上是生活随笔為你收集整理的移动对meta的定义(转)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 如何优雅地「蜗居」?
- 下一篇: 微软职位内部推荐-Sr. SW Engi