制作手機(jī)版網(wǎng)站的時(shí)候,除了頁(yè)面簡(jiǎn)潔、操作方便等訪問(wèn)者可以看到的地方以外,就是 Meta 標(biāo)簽的設(shè)置,合理設(shè)置 Meta 標(biāo)簽 對(duì)手機(jī)版網(wǎng)站的搜索引擎優(yōu)化,手機(jī)瀏覽器的渲染展示都有非常大的幫助。對(duì)于桌面平臺(tái)web布局中大家對(duì)meta標(biāo)簽再熟悉不過(guò)了,它永遠(yuǎn)位于 head 元素內(nèi)部,對(duì)做SEO的朋友一定對(duì)meta有種特殊的感情吧,今天我們就來(lái)說(shuō)說(shuō)移動(dòng)平臺(tái)的meta標(biāo)簽,在移動(dòng)平臺(tái)meta標(biāo)簽究竟有哪些神奇的功效呢?
1、Meta 之 viewport
說(shuō)到移動(dòng)平臺(tái)meta標(biāo)簽,那就不得不說(shuō)一下viewport了,那么什么是viewport呢?
viewport即可視區(qū)域,對(duì)于桌面瀏覽器而言,viewport指的就是除去所有工具欄、狀態(tài)欄、滾動(dòng)條等等之后用于看網(wǎng)頁(yè)的區(qū)域
。對(duì)于傳統(tǒng)WEB頁(yè)面來(lái)說(shuō),980的寬度在iphone上顯示是很正常的,也是滿屏的,但對(duì)于webapp而言,可能就有點(diǎn)問(wèn)題了,在iphone上我們的webapp在豎屏下通常寬度都是320,這時(shí)我們320頁(yè)面在iphone上顯示成啥效果呢?有人可能認(rèn)為iPhone不是320的寬度莫,感覺(jué)應(yīng)該是滿屏的吧,事實(shí)呢?我們來(lái)看一下如下布局在iPhone上的顯示情況
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Viewport</title>
<style type="text/css">
div,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:#fff;
}
div{
width:320px;
height:100px;
margin:0 auto;
background:#000;
text-align:center;
font:30px/100px Arial;
}
</style>
</head>
<body>
<div>
AppUE
</div>
</body>
</html>
因此我們必須改變viewport,我們就有如下幾種屬性值可以設(shè)置:
width: viewport 的寬度 (范圍從 200 到 10,000 ,默認(rèn)為 980 像素 )
height: viewport 的高度 (范圍從 223 到 10,000 )
initial-scale: 初始的縮放比例 (范圍從>0到 10 )
minimum-scale: 允許用戶縮放到的最小比例
maximum-scale: 允許用戶縮放到的最大比例
user-scalable: 用戶是否可以手動(dòng)縮放
對(duì)于這些屬性,我們可以設(shè)置其中的一個(gè)或者多個(gè),并不需要你同時(shí)都設(shè)置,iPhone 會(huì)根據(jù)你設(shè)置的屬性自動(dòng)推算其他屬性值 ,而非直接采用默認(rèn)值。
如果你把initial-scale=1 ,那么 width 和 height在豎屏?xí)r自動(dòng)為320*356 (不是320*480 因?yàn)榈刂窓诘榷颊紦?jù)空間 ),橫屏?xí)r自動(dòng)為 480*208。類似地 ,如果你僅僅設(shè)置了 width ,就會(huì)自動(dòng)推算出initial-scale 以及height。例如你設(shè)置了 width=320 ,豎屏?xí)r initial-scale 就是 1 ,橫屏?xí)r則變成 1.5 了。 那么到底這些設(shè)置如何讓 Safari 知道 ?其實(shí)很簡(jiǎn)單 ,就一個(gè) meta ,形如 :
代碼如下:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
好了,我們就可以按全屏來(lái)布局我們的頁(yè)面了,不用再擔(dān)心頁(yè)面顯示的很小了!
2、Meta 之 format-detection
代碼如下:
<meta name=”format-detection” content=”telephone=no” />
你明明寫(xiě)的一串?dāng)?shù)字沒(méi)加鏈接樣式,而iPhone會(huì)自動(dòng)把你這個(gè)文字加鏈接樣式、并且點(diǎn)擊這個(gè)數(shù)字還會(huì)自動(dòng)撥號(hào)!想去掉這個(gè)撥號(hào)鏈接該如何操作呢?這時(shí)我們的meta又該大顯神通了,代碼如下:
telephone=no就禁止了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接!
telephone=yes就開(kāi)啟了把數(shù)字轉(zhuǎn)化為撥號(hào)鏈接,要開(kāi)啟轉(zhuǎn)化功能,這個(gè)meta就不用寫(xiě)了,在默認(rèn)是情況下就是開(kāi)啟!
3、Meta 之 apple-mobile-web-app-capable
<meta name=”apple-mobile-web-app-capable” content=”yes” />
這meta的作用就是刪除默認(rèn)的蘋(píng)果工具欄和菜單欄。content有兩個(gè)值”yes”和”no”,當(dāng)我們需要顯示工具欄和菜單欄時(shí),這個(gè)行meta就不用加了,默認(rèn)就是顯示。
4、Meta 之 apple-mobile-web-app-status-bar-style
代碼如下:
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
作用是控制狀態(tài)欄顯示樣式
代碼如下:
status-bar-style:black
status-bar-style:black-translucent
今天就簡(jiǎn)單說(shuō)下在手機(jī)版網(wǎng)站中需要添加哪幾種 Meta 標(biāo)簽:
viewport
viewport 幾乎已經(jīng)是公認(rèn)的標(biāo)準(zhǔn)了,最初是由蘋(píng)果公司創(chuàng)建,用于 iPhone 上面的移動(dòng)版 Safari,由于 iPhone 的大賣,大部分其他移動(dòng)瀏覽器都接受,比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox
最基本的例子,在移動(dòng)上使站點(diǎn)全屏寬度:
代碼如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HandheldFriendly
這個(gè)標(biāo)簽和下面介紹的 MobileOptimized 是功能機(jī)時(shí)代的事實(shí)上標(biāo)簽。
HandheldFriendly 標(biāo)簽最早在 AvantGo 瀏覽用來(lái)標(biāo)示移動(dòng)內(nèi)容的,后來(lái)變成一個(gè)通用的標(biāo)準(zhǔn)用來(lái)標(biāo)示移動(dòng)站點(diǎn),但是不知道這個(gè)標(biāo)簽的支持情況。
代碼如下:
<meta name="HandheldFriendly" content="true"/>
MobileOptimized
這是一個(gè) Windows 專有的 meta 標(biāo)簽也最終成為用于識(shí)別移動(dòng)內(nèi)容的另一種方法,但是該標(biāo)簽的缺點(diǎn)是,特定的寬度必須給出,再次,這個(gè)標(biāo)簽的支持情況也是未知的:
代碼如下:
<meta name="MobileOptimized" content="320"/>