移動端網頁常用meta

標籤：

今天在對前公司的某直播室前端進行改版時，整理了一下平時移動端頁面開發時，最常用的meta。如下：

<!--定義頁面製作者，可以留姓名，也可以留連絡方式--><meta name="author" content="chenjunfeng"/><!--向搜尋引擎說明你的網頁的關鍵詞--><meta name="keywords" contect=""/><!--告訴搜尋引擎你的網站的主要內容--><meta name="description" contect="" /><!--下面兩個meta的作用都是：添加到主畫面後，全螢幕顯示--><!--兩者的區別，google stackflow中的答案是--><!--They behave the same way, at least for now. --><!--app-mobile-web-app-capable is the only version mentioned in Safari documentation, so I would stick with it. --><!--It looks to me as if apple-touch-fullscreen was used in early demos/previews, so it was left working later when the SDK got actually released, but the preferred version is the one documented.--><meta name="apple-touch-fullscreen" content="yes"/>  <!--可能會被除去--><meta name="apple-mobile-web-app-capable" content="yes"/><!--頁面內容中的電話號碼是否以超連結形式顯示，telephone=no表示否--><meta name="format-detection" content="telephone=no"/><!--width: viewport 的寬度 （範圍從 200 到 10,000 ，預設為 980 像素 ）--><!--height: viewport 的高度 （範圍從 223 到 10,000 ）--><!--initial-scale: 初始的縮放比例 （範圍從>0到 10 ）--><!--minimum-scale: 允許使用者縮放到的最小比例--><!--maximum-scale: 允許使用者縮放到的最大比例--><!--user-scalable: 使用者是否可以手動縮放--><meta name="viewport"  content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/><!--這個link就是設定web app的放置主畫面上icon檔案路徑。--><!--圖片尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）--><!--尾碼precomposed是自訂高光及圓角表徵圖--><!--雖然官方都用的png圖片做說明，但實際測試jpg格式也可用（不推薦）--><!--圖片無需做圓角和高光效果，同Native App一樣，系統會自動為表徵圖添加圓角及高光。--><!--如果不想系統對表徵圖添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon，這時我們提供的表徵圖就要自己做圓角和高亮效果了。--><!--參考：http://blog.csdn.net/freshlover/article/details/9310437--><link rel="apple-touch-icon-precomposed" href="icon.png" /><!-- Standard iPhone --><link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" /><!-- Retina iPhone --><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" /><!-- Standard iPad --><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" /><!-- Retina iPad --><link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" /><link rel="icon" href="favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><!---------------------少用的----------------------><!--告訴搜尋引擎爬取完隔多長時間爬一次--><meta name="revisit-after" content="1 days">

View Code

相關連結：

github:https://github.com/NathanChan/generalMetaDemo

移動端網頁常用meta