1. 程式人生 > >IOS WebApp 的 meta 標籤

IOS WebApp 的 meta 標籤

apple-mobile-web-app-capable

設定Web應用是否以全屏模式執行。

語法:
<meta name="apple-mobile-web-app-capable" content="yes">
說明:
如果content設定為yes,Web應用會以全屏模式執行,反之,則不會。content的預設值是no,表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。
相容性:
iOS 2.1 +

apple-mobile-web-app-status-bar-style

設定Web App的狀態列(螢幕頂部欄)的樣式

語法:
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
說明:

除非你先使用apple-mobile-web-app-capable指定全屏模式,否則這個meta標籤不會起任何作用。

如果content設定為default,則狀態列正常顯示。如果設定為blank,則狀態列會有一個黑色的背景。如果設定為blank-translucent,則狀態列顯示為黑色半透明。如果設定為default或blank,則頁面顯示在狀態列的下方,即狀態列佔據上方部分,頁面佔據下方部分,二者沒有遮擋對方或被遮擋。如果設定為blank-translucent,則頁面會充滿螢幕,其中頁面頂部會被狀態列遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的Retina螢幕為40px)。預設值是default。

相容性
iOS 2.1 +

format-detection

啟動或禁用自動識別頁面中的電話號碼。

語法:
<meta name="format-detection" content="telephone=no">
說明:
預設情況下,裝置會自動識別任何可能是電話號碼的字串。設定telephone=no可以禁用這項功能。
相容性
iOS 1.0 +

viewport

語法:
<meta name="viewport" content="width=230,initial-scale=2.3,user-scalable=no">
說明:

使用viewport meta標籤可以提升頁面在裝置上的表現效果,典型地,你可以設定視口(viewport)的寬度和初始縮放比例。

舉個例子來說,如果頁面的寬度小於980px,你可以設定視口的寬度以適應頁面。如果你正在開發一款Web應用,你應該設定視口的寬度為裝置的寬度。

表 1 描述了viewport meta標籤支援的屬性以及它們的預設值。當有多個屬性時,應該使用逗號分隔賦值表示式。設定多個屬性時請遵循以下規則:

  • 不要使用分號作為分隔符。
  • 空格也可以作為分隔符,但最好使用逗號。
  • 對於屬性值是數字的屬性,如果屬性值包含了非數字字元但是以數字開頭,那麼只有數字的部分被當做屬性值。例如,1.0x等價於1.0,123x456等價於123。如果引數不以數字開頭,則屬性值為0。

當要用到裝置的尺寸資料時,你可以使用表2中的常量替代數字值。例如,使用device-width替代320(寬度),用device-height替代480(高度)。

你不需要設定每一個屬性,未設定的屬性會自動採用預設值。

設定視口的寬度為裝置的寬度:

<meta name="viewport" content="width=device-width">

設定初始縮放比例為1.0:

<meta name="viewport" content="initial-scale=1.0">

設定初始縮放比例,同時禁止使用者縮放。

<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

相容性
iOS 1.0 +
表 1 Viewport 屬性
屬性 描述
width 視口的寬度。預設值是980,取值範圍是200至10000,也可以取值為常量device-width。
height 視口的高度。預設值是根據width的值和裝置的寬高比來計算,取值範圍是223至10000,也可以取值為常量device-height。
initial-scale 視口的初始縮放比例。預設值取決於頁面充滿螢幕的縮放比例,取值範圍取決於minimum-scale和maximum-scale。
minimum-scale 視口的最小縮放比例。預設值是0.25,取值範圍是>0至10.0。
maximum-scale 視口的最大縮放比例。預設值是5.0,取值範圍是>0至10.0。
user-scable 設定使用者是否可以縮放視口。yes表示可以,no表示不能,預設值是yes。設定user-scable為no可以防止當用戶在input標籤的文字域中輸入文字時頁面發生滾動。
表 2 特殊的viewport屬性值
屬性值 描述
device-width 裝置的寬度(畫素)。
device-height 裝置的高度(畫素)。