移動web入門之meta標簽

meta標簽學習總結：

　　Meta標簽的name屬性語法格式：＜meta name="參數" content="具體參數值"＞

　　1.viewport

 

　　首先，我們對viewport要有一個理解：

　　　　通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的 webview)用來顯示網頁的那部分區域，但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區 域要小。

　　接下來就是后面的參數和參數值的意義：

　　<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

　　　　initial-scale - 初始的縮放比例  
　　 　 minimum-scale - 允許用戶縮放到的最小比例   
　　 　 maximum-scale - 允許用戶縮放到的最大比例  
　　 　 user-scalable - 用戶是否可以手動縮放

 

　　2.format-detection

　　<meta name="format-detection" content="telephone=no, email=no" />

　　忽略頁面中的數字識別為電話，忽略email識別

　　3.IOS私有的兩個屬性：apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style

　　<meta name="apple-mobile-web-app-capable" content="yes" />的作用是啟用 webapp 模式, content值為yes時會隱藏工具欄和菜單欄，和其它配合使用。

　　<meta name="apple-mobile-web-app-status-bar-style" content="black" />的作用是在webapp模式下，改變頂部狀態條的顏色。默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）

　　4.<meta name="apple-touch-fullscreen" content="yes">

　　"添加到主屏幕“后，全屏顯示

　　5.<meta name="theme-color" content="#91D4DA">

　　控制選項卡顏色，如下圖：

 

　　

原文鏈接： http://caibaojian.com/mobile-meta.html

//code from http://caibaojian.com/mobile-meta.html
<meta name="format-detection" content="telphone=no, email=no"/>