移動端html5 meta標簽的神奇功效

來源：易賢網閱讀：1152 次日期：2016-07-09 10:04:19

溫馨提示：易賢網小編為您整理了“移動端html5 meta標簽的神奇功效”,方便廣大網友查閱！

制作手機版網站的時候，除了頁面簡潔、操作方便等訪問者可以看到的地方以外，就是 Meta 標簽的設置，合理設置 Meta 標簽對手機版網站的搜索引擎優化，手機瀏覽器的渲染展示都有非常大的幫助。對于桌面平臺web布局中大家對meta標簽再熟悉不過了，它永遠位于 head 元素內部，對做SEO的朋友一定對meta有種特殊的感情吧，今天我們就來說說移動平臺的meta標簽，在移動平臺meta標簽究竟有哪些神奇的功效呢？

1、Meta 之 viewport

說到移動平臺meta標簽，那就不得不說一下viewport了，那么什么是viewport呢？

viewport即可視區域，對于桌面瀏覽器而言，viewport指的就是除去所有工具欄、狀態欄、滾動條等等之后用于看網頁的區域

。對于傳統WEB頁面來說，980的寬度在iphone上顯示是很正常的，也是滿屏的，但對于webapp而言，可能就有點問題了，在iphone上我們的webapp在豎屏下通常寬度都是320，這時我們320頁面在iphone上顯示成啥效果呢？有人可能認為iPhone不是320的寬度莫，感覺應該是滿屏的吧，事實呢？我們來看一下如下布局在iPhone上的顯示情況

代碼如下:

<!DOCTYPE html>

<html>

<head>

<title>Meta Viewport</title>

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，我們就有如下幾種屬性值可以設置：

width: viewport 的寬度（范圍從 200 到 10,000 ，默認為 980 像素）

height: viewport 的高度（范圍從 223 到 10,000 ）

initial-scale: 初始的縮放比例（范圍從>0到 10 ）

minimum-scale: 允許用戶縮放到的最小比例

maximum-scale: 允許用戶縮放到的最大比例

user-scalable: 用戶是否可以手動縮放

對于這些屬性，我們可以設置其中的一個或者多個，并不需要你同時都設置，iPhone 會根據你設置的屬性自動推算其他屬性值，而非直接采用默認值。

如果你把initial-scale=1 ，那么 width 和 height在豎屏時自動為320*356 （不是320*480 因為地址欄等都占據空間），橫屏時自動為 480*208。類似地，如果你僅僅設置了 width ，就會自動推算出initial-scale 以及height。例如你設置了 width=320 ，豎屏時 initial-scale 就是 1 ，橫屏時則變成 1.5 了。那么到底這些設置如何讓 Safari 知道？其實很簡單，就一個 meta ，形如：

代碼如下:

好了，我們就可以按全屏來布局我們的頁面了，不用再擔心頁面顯示的很小了！

2、Meta 之 format-detection

代碼如下:

你明明寫的一串數字沒加鏈接樣式，而iPhone會自動把你這個文字加鏈接樣式、并且點擊這個數字還會自動撥號！想去掉這個撥號鏈接該如何操作呢？這時我們的meta又該大顯神通了，代碼如下：

telephone=no就禁止了把數字轉化為撥號鏈接！

telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在默認是情況下就是開啟！

3、Meta 之 apple-mobile-web-app-capable

這meta的作用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。

4、Meta 之 apple-mobile-web-app-status-bar-style

代碼如下:

作用是控制狀態欄顯示樣式

代碼如下:

status-bar-style:black

status-bar-style:black-translucent

今天就簡單說下在手機版網站中需要添加哪幾種 Meta 標簽：

viewport

viewport 幾乎已經是公認的標準了，最初是由蘋果公司創建，用于 iPhone 上面的移動版 Safari，由于 iPhone 的大賣，大部分其他移動瀏覽器都接受，比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox

最基本的例子，在移動上使站點全屏寬度：

代碼如下:

HandheldFriendly

這個標簽和下面介紹的 MobileOptimized 是功能機時代的事實上標簽。

HandheldFriendly 標簽最早在 AvantGo 瀏覽用來標示移動內容的，后來變成一個通用的標準用來標示移動站點，但是不知道這個標簽的支持情況。

代碼如下:

MobileOptimized

這是一個 Windows 專有的 meta 標簽也最終成為用于識別移動內容的另一種方法，但是該標簽的缺點是，特定的寬度必須給出，再次，這個標簽的支持情況也是未知的：

代碼如下:

上一篇：Html5插件教程之添加瀏覽器放大鏡效果的商品櫥窗

下一篇：HTML5學習筆記之html5與傳統html區別

易賢網手機網站地址：移動端html5 meta標簽的神奇功效