移動端的頭部標籤和meta

時間 2019-11-09

標籤移動端的頭部標籤 meta 欄目無線简体版

原文原文鏈接

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>xxx</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

　　這是一個HTML5爲語言標準的說明文檔。第一組meta標籤，你們比較常見。這個是常常用到的。它代表的意思是它的內容是html文檔，且網頁編碼採用的是utf-8編碼。utf-8編碼主要針對是簡體中文和英文。正確的編碼定義頗有必要。不然會致使網頁上的文字變成亂碼。

第二組meta標籤就是移動端特屬的標籤了。它代表的意思是它是一個視圖窗口。其視圖窗口內容的寬度等於移動端設備的默認寬度。inital-scale表示的初始的縮放比例.通常設置爲1.0倍。maximum-scale=1.0表示的容許用戶縮放的最大比例。user-scalable=no表示是否支持用戶手動進行縮放。第三組和第四組meta標籤都是針對IOS系統的專屬標籤。第三組meta標籤表示的意思是是否啓動webapp功能。說通俗一點。就是當點擊網頁添加至主屏幕功能時，會在主屏幕上生成一個圖標。點擊該圖標會進入webapp功能。就是模擬本地應用的模式來瀏覽web頁面。生成的圖標能夠自定義，啓動webapp時的開始時的圖片也能夠定義。這個是link標籤的做用，我會在介紹link標籤時，單獨進行說明。第四組meta標籤表示的是當啓動webapp功能時，顯示手機信號、時間、電池的頂部導航欄的顏色。默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。這個主要是根據實際的頁面設計的主體色爲搭配來進行設置。html

注：SEO 優化部分

頁面標題<title>標籤(head 頭部必須)ios

<title>your title</title>

頁面關鍵詞 keywordsweb

<meta name="keywords" content="your keywords">

頁面描述內容 descriptionapp

<meta name="description" content="your description">

定義網頁做者 authorwebapp

<meta name="author" content="author,email address">

定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，一般有以下幾種取值：none，noindex，nofollow，all，index和follow。優化

<meta name="robots" content="index,follow">

ios設備須要：

禁止數字識自動別爲電話號碼ui

<meta name="format-detection" content="telephone=no" /> <!-- 禁止數字識自動別爲電話號碼 -->

相關標籤/搜索