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

2020-03-24 18:09:34

字體：大中小

來源：轉載

供稿：網友

制作手機版網站的時候，除了頁面簡潔、操作方便等訪問者可以看到的地方以外，就是 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
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，我們就有如下幾種屬性值可以設置：
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 ，形如：

復制代碼代碼如下:
meta name= viewport content= width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; /
好了，我們就可以按全屏來布局我們的頁面了，不用再擔心頁面顯示的很小了！
2、Meta 之 format-detection

復制代碼代碼如下:
meta name= format-detection content= telephone=no /
你明明寫的一串數字沒加鏈接樣式，而iPhone會自動把你這個文字加鏈接樣式、并且點擊這個數字還會自動撥號！想去掉這個撥號鏈接該如何操作呢？這時我們的meta又該大顯神通了，代碼如下：
telephone=no就禁止了把數字轉化為撥號鏈接！
telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在默認是情況下就是開啟！

3、Meta 之 apple-mobile-web-app-capable
meta name= apple-mobile-web-app-capable content= yes /
這meta的作用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值 yes 和 no ,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
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 /
作用是控制狀態欄顯示樣式

復制代碼代碼如下:
status-bar-style:black
status-bar-style:black-translucent

今天就簡單說下在手機版網站中需要添加哪幾種 Meta 標簽：
viewport
viewport 幾乎已經是公認的標準了，最初是由蘋果公司創建，用于 iPhone 上面的移動版 Safari，由于 iPhone 的大賣，大部分其他移動瀏覽器都接受，比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox
最基本的例子，在移動上使站點全屏寬度：

復制代碼代碼如下:
meta name="viewport" content="width=device-width, initial-scale=1.0"/
HandheldFriendly
這個標簽和下面介紹的 MobileOptimized 是功能機時代的事實上標簽。
HandheldFriendly 標簽最早在 AvantGo 瀏覽用來標示移動內容的，后來變成一個通用的標準用來標示移動站點，但是不知道這個標簽的支持情況。

復制代碼代碼如下:
meta name="HandheldFriendly" content="true"/
MobileOptimized
這是一個 Windows 專有的 meta 標簽也最終成為用于識別移動內容的另一種方法，但是該標簽的缺點是，特定的寬度必須給出，再次，這個標簽的支持情況也是未知的：

復制代碼代碼如下:
meta name="MobileOptimized" content="320"/
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML是什么以及怎么用

下一篇：網頁制作中注意應用HTML標簽的問題