1.先說說mate標(biāo)簽里的viewport：

viewport即可視區(qū)域，對于桌面瀏覽器而言，viewport指的就是除去所有工具欄、狀態(tài)欄、滾動(dòng)條等等之后用于看網(wǎng)頁的區(qū)域。對于傳統(tǒng)WEB頁面來說，980的寬度在iphone上顯示是很正常的，也是滿屏的，但對于webapp而言，可能就有點(diǎn)問題了，在iphone上我們的webapp在豎屏下通常寬度都是320。

因此我們必須改變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)縮放

對于這些屬性，我們可以設(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í)很簡單 ，就一個(gè) meta ，形如 ：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> 設(shè)置了meat后我們頁面將如此呈現(xiàn)了

2.meta標(biāo)簽里的name屬性

?? name 屬性
(1)、＜meta name="Generator" contect=""＞用以說明生成工具（如Microsoft FrontPage 4.0）等；

(2)、＜meta name="keywords" contect=""＞向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞；

(3)、＜meta name="Description" contect=""＞告訴搜索引擎你的站點(diǎn)的主要內(nèi)容；

(4)、＜meta name="Author" contect="你的姓名"＞告訴搜索引擎你的站點(diǎn)的制作的作者；

(5)、＜meta name="Robots" contect="all | none | index | noindex | follow | nofollow"＞

其中的屬性說明如下：

設(shè)定為all：文件將被檢索，且頁面上的鏈接可以被查詢；

設(shè)定為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；

設(shè)定為index：文件將被檢索；

設(shè)定為follow：頁面上的鏈接可以被查詢；

設(shè)定為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；

設(shè)定為nofollow：文件將不被檢索，頁面上的鏈接可以被查詢

3.webapp里主要的mate用途

<meta name="apple-touch-fullscreen" content="yes">? 添加到主屏幕后，全屏顯示。

<meta name="apple-mobile-web-app-capable" content="yes" />

這meta的作用就是刪除默認(rèn)的蘋果工具欄和菜單欄。content有兩個(gè)值”yes”和”no”,當(dāng)我們需要顯示工具欄和菜單欄時(shí)，這個(gè)行meta就不用加了，默認(rèn)就是顯示。

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />

默認(rèn)值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意： 若值為“black-translucent”將會(huì)占據(jù)頁面px位置，浮在頁面上方（會(huì)覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

在iOS中有兩個(gè)meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個(gè)會(huì)讓網(wǎng)頁內(nèi)容以應(yīng)用程序風(fēng)格顯示，并使?fàn)顟B(tài)欄透明。

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
說明： 這個(gè)link就是設(shè)置web app的放置主屏幕上icon文件路徑。
圖片尺寸可以設(shè)定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //將不識別郵箱
告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網(wǎng)頁存為書簽時(shí)，在手機(jī)HOME界面創(chuàng)建應(yīng)用程序樣式的圖標(biāo)。

<meta?name="sharecontent"?data-msg-img="縮略圖地址"?data-msg-title="標(biāo)題"?data-msg-content="簡介"?data-msg-callBack=""?data-line-img="縮略圖地址"?data-line-title="標(biāo)題"?data-line-callBack=""/>??

微信分享頁面設(shè)置

轉(zhuǎn)載于:https://www.cnblogs.com/jxh-it/p/4009553.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的WebApp 里Meta标签大全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。