移動端meta標籤

移動端meta標籤

移動端meta標籤的作用，內容，content有幾種類型的值  

    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

（一）meta標籤的作用

meta裏的數據是供機器解讀的，告訴機器該如何解析這個頁面   

（二）meta的必需屬性和可選屬性

1.必需屬性content

屬性值爲text   

<meta content="text">

2.可選屬性http-equiv

http-equiv 屬性在 <meta> 標籤相當於HTTP的頭文件，向瀏覽器傳遞有用的信息，該屬性使用
的變量的值會在 content 屬性中規定，

<meta http-equiv="content-type|default-style|refresh">

3.可選屬性name

name 屬性定義了HTML文檔的描述、關鍵詞和作者，對應於 content 屬性

<meta name="value">

(三)常見的meta標籤

1.charset是聲明文檔使用的字符編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset
一定要寫第一行，不然就可能會產生亂碼了。  

//兩種方式等效
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

2.SEO 優化部分   

<!-- 頁面標題<title>標籤(head 頭部必須) -->
<title>your title</title>
<!-- 頁面關鍵詞 keywords -->
<meta name="keywords" content="your keywords">
<!-- 頁面描述內容 description -->
<meta name="description" content="your description">
<!-- 定義網頁作者 author -->
<meta name="author" content="author,email address">
<!-- 定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">

3.viewport主要是影響移動端頁面佈局的  

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)

4.Apple iOS  

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">


<!-- 禁止自動探測並格式化手機號碼 -->
<meta name="format-detection" content="telephone=no">


<!-- Add to Home Screen添加到主屏 -->
<!-- 是否啓用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 設置狀態欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏後的標題 -->
<meta name="apple-mobile-web-app-title" content="App Title">