meta標簽

一瞄崇、meta 標簽分兩大部分:HTTP 標題信息(http-equiv)和頁面描述信息(name)。

1肖卧、http-equiv 屬性的 Content-Type 值(顯示字符集的設定)

說明:設定頁面使用的字符集求妹,用以說明主頁制作所使用的文字語言,瀏覽器會根據(jù)此來調(diào)用相應的字符集顯示 page 內(nèi)容什乙。

用法:


注意:該 meta 標簽定義了 HTML 頁面所使用的字符集為 utf-8 ,就是萬國碼已球。它可以在同一頁面顯示中文簡體臣镣、繁體及其它語言(如日文,韓文)等智亮。

2忆某、name 屬性的 viewport 值(移動屏幕的縮放)

也就是可視區(qū)域。對于桌面瀏覽器阔蛉,我們都很清楚 viewport 是什么弃舒,就是除去了所有工具欄、狀態(tài)欄状原、滾動條等等之后用于看網(wǎng)頁的區(qū)域聋呢,這是真正有效的區(qū)域。由于移動設備屏幕寬度不同于傳統(tǒng) 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)


說明:

強制讓文檔與設備的寬度保持 1:1 器贩;

文檔最大的寬度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);

user-scalable 定義用戶是否可以手動縮放( no 為不縮放)朋截,使頁面固定設備上面的大杏忌浴;

注意:實際測試中發(fā)現(xiàn)部服,有些安卓系統(tǒng)自帶的瀏覽器并不支持這一條規(guī)則唆姐,能夠?qū)撁孢M行放大,一旦放大響應的 box 也隨之放大饲宿,導致頁面出現(xiàn)錯亂問題厦酬,解決方法:定義頁面的最小寬度


3、name 屬性的 format-detection 值(忽略頁面中的數(shù)字識別為電話號碼)


說明:

使設備瀏覽網(wǎng)頁時對數(shù)字不啟用電話功能(不同設備解釋不同瘫想,iTouch 點擊數(shù)字為存入聯(lián)系人,iPhone 為撥打電話)昌讲,忽略將頁面中的數(shù)字識別為電話號碼国夜。

若需要啟用電話功能將 telephone=yes 即可,若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設備上打開相應的程序組件短绸。

4车吹、name 屬性的 apple-mobile-web-app-capable 值(網(wǎng)站開啟對 web app 程序的支持)


說明:

網(wǎng)站開啟對 web app 程序的支持筹裕。

該 meta 可以看出內(nèi)容為“蘋果設備 web 應用程序 xx”,就是說該 meta 是專門定義 web 應用的窄驹。

5朝卒、name 屬性的 apple-mobile-web-app-status-bar-style 值(改變頂部狀態(tài)條的顏色)


說明:

在 web app 應用下狀態(tài)條(屏幕頂部條)的顏色;

默認值為 default(白色)乐埠,可以定為 black(黑色)和 black-translucent(灰色半透明)抗斤;

注意:若值為“black-translucent”將會占據(jù)頁面位置,浮在頁面上方(會覆蓋頁面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕為 40px )丈咐。

6瑞眼、name 屬性設置作者姓名及聯(lián)系方式


二、蘋果 Web App 其他設置:

當然棵逊,配合 Web App 的 icon 和啟動界面需要額外的兩端代碼進行設定伤疙,如下所示:



說明:這個 link 就是設置 Web App 的放置主屏幕上 icon 文件路徑(圖片四)。

使用:

該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務器的文檔的根目錄辆影。

圖片尺寸可以設定為 57*57(px)或者 Retina 可以定為 114*114(px)徒像,iPad 尺寸為 72*72(px)



說明:這個 link 就是設置啟動時候的界面。

使用:

放置的路徑和上面一樣蛙讥。

官方規(guī)定啟動界面的尺寸必須為 320*640(px)厨姚,原本以為 Retina 屏幕可以支持雙倍,但是不支持键菱,圖片顯示不出來谬墙。

如果對 Web App 的這兩個 meta 還有不能詳細理解的可以查看官方解釋:Meta Tags

關于 link 方面還有更多的參數(shù)設置(例如:iPod、iPad经备、iPhone 不同尺寸不同圖標)拭抬,可以查看官方標準文檔:Configuring Web Applications

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市侵蒙,隨后出現(xiàn)的幾起案子造虎,更是在濱河造成了極大的恐慌,老刑警劉巖纷闺,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件算凿,死亡現(xiàn)場離奇詭異,居然都是意外死亡犁功,警方通過查閱死者的電腦和手機氓轰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來浸卦,“玉大人署鸡,你說我怎么就攤上這事。” “怎么了靴庆?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵时捌,是天一觀的道長。 經(jīng)常有香客問我炉抒,道長奢讨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任焰薄,我火速辦了婚禮拿诸,結果婚禮上,老公的妹妹穿的比我還像新娘蛤奥。我一直安慰自己佳镜,他們只是感情好,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布凡桥。 她就那樣靜靜地躺著蟀伸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪缅刽。 梳的紋絲不亂的頭發(fā)上啊掏,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音衰猛,去河邊找鬼迟蜜。 笑死,一個胖子當著我的面吹牛啡省,可吹牛的內(nèi)容都是我干的娜睛。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼卦睹,長吁一口氣:“原來是場噩夢啊……” “哼畦戒!你這毒婦竟也來了?” 一聲冷哼從身側響起结序,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤障斋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后徐鹤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體垃环,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年返敬,在試婚紗的時候發(fā)現(xiàn)自己被綠了遂庄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡救赐,死狀恐怖涧团,靈堂內(nèi)的尸體忽然破棺而出只磷,到底是詐尸還是另有隱情经磅,我是刑警寧澤泌绣,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站预厌,受9級特大地震影響阿迈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜轧叽,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一苗沧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧炭晒,春花似錦待逞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至震束,卻和暖如春怜庸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背垢村。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工割疾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嘉栓。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓宏榕,卻偏偏與公主長得像,于是被迫代替她去往敵國和親侵佃。 傳聞我的和親對象是個殘疾皇子麻昼,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容