移動平臺對 META 標籤的定義

下面介紹一些有關標記的例子及解釋。

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

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

說明:設定頁面使用的字符集,用以說明主頁製作所使用的文字語言,瀏覽器會根據此來調用相應的字符集顯示 page 內容。

用法:

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>



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

2、name 屬性的 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)


<metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

說明:

  • 強制讓文檔與設備的寬度保持 1:1 ;
  • 文檔最大的寬度比列是1.0( initial-scale 初始刻度值和 maximum-scale 最大刻度值);
  • user-scalable 定義用戶是否可以手動縮放( no 爲不縮放),使頁面固定設備上面的大小;

注意:實際測試中發現,有些安卓系統自帶的瀏覽器並不支持這一條規則,能夠對頁面進行放大,一旦放大響應的 box 也隨之放大,導致頁面出現錯亂問題,解決方法:定義頁面的最小寬度


body {

    min-width:320px;

}


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

<metaname="format-detection"content="telephone=no"/>


說明:

  • 使設備瀏覽網頁時對數字不啓用電話功能(不同設備解釋不同,iTouch 點擊數字爲存入聯繫人,iPhone 爲撥打電話),忽略將頁面中的數字識別爲電話號碼。
  • 若需要啓用電話功能將 telephone=yes 即可,若在頁面上面有 Google Maps, iTunes 和 YouTube 的鏈接會在ios設備上打開相應的程序組件。

4、name 屬性的 apple-mobile-web-app-capable 值(網站開啓對 web app 程序的支持)

<metaname="apple-mobile-web-app-capable"content="yes"/>


說明:

  • 網站開啓對 web app 程序的支持。
  • 該 meta 可以看出內容爲“蘋果設備 web 應用程序 xx”,就是說該 meta 是專門定義 web 應用的。

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

<metaname="apple-mobile-web-app-status-bar-style"content="black"/>



說明:

  • 在 web app 應用下狀態條(屏幕頂部條)的顏色;
  • 默認值爲 default(白色),可以定爲 black(黑色)和 black-translucent(灰色半透明);

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

6、name 屬性設置作者姓名及聯繫方式

<metaname="author"contect="liudanyun, [email protected]"/>


二、蘋果 Web App 其他設置:

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

<linkrel="apple-touch-icon-precomposed"href="iphone_logo.png"/>


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

使用:

  • 該路徑需要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
  • 圖片尺寸可以設定爲 57*57(px)或者 Retina 可以定爲 114*114(px),iPad 尺寸爲 72*72(px)



<link rel="apple-touch-startup-image"href="logo_startup.png"



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

使用:

  • 放置的路徑和上面一樣。
  • 官方規定啓動界面的尺寸必須爲 320*640(px),原本以爲 Retina 屏幕可以支持雙倍,但是不支持,圖片顯示不出來。

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章