Head標(biāo)簽中要點(diǎn)

【手機(jī)端特有】

標(biāo)注作者

<metaname="author"content="網(wǎng)站域名"/>

在瀏覽器中頁面將以原始大小顯示，并不允許縮放

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

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)縮放

在瀏覽器中頁面中出現(xiàn)的手機(jī)號(hào)碼將不以撥號(hào)的超鏈接的形式出現(xiàn)，在iphone中默認(rèn)以超鏈接形式出現(xiàn)（無需添加）

<metaname="format-detection"content="telephone=no">

不識(shí)別頁面中出現(xiàn)的郵箱

<metaname="format-detection"content="email=no"/>/

開啟頁面對(duì)webapp程序的支持，一開始不需要添加

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

在webapp應(yīng)用下狀態(tài)條(屏幕頂部條)的顏色,默認(rèn)default為白色，可以定義為黑色black和灰色半透明black-translucent。

<metaname="apple-mobile-web-app-status-bar-style" content="black" />

注意：若值為“black-translucent”將會(huì)占據(jù)頁面px位置，浮在頁面上方（會(huì)覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）

【蘋果web app持有】

"添加到主屏幕“后，全屏顯示（完全不明白,可以添加）

<metaname="apple-touch-fullscreen"content="yes">

刪除默認(rèn)的蘋果工具欄和菜單欄,默認(rèn)是顯示（無需添加）

<metaname="apple-mobile-web-app-capable"content="no"/>

在用戶把網(wǎng)頁存為書簽時(shí)，在手機(jī)HOME界面創(chuàng)建應(yīng)用程序樣式的圖標(biāo)，換句話就是：這個(gè)link就是設(shè)置webapp的放置主屏幕上icon文件路徑

//IOS
<linkrel="apple-touch-icon"href="iphone_milanoo.png"/>
//Android
<linkrel="apple-touch-icon-precomposed"href="iphone_milanoo.png"/>

注意：該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務(wù)器的文檔的根目錄

設(shè)置啟動(dòng)時(shí)的界面顯示的圖片

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

注意：該路徑需要注意的就是放到將網(wǎng)站的文檔根目錄下但不是服務(wù)器的文檔的根目錄。
官方規(guī)定啟動(dòng)界面的尺寸必須為320*640（px），原本以為Retina屏幕可以支持雙倍，但是不支持，圖片顯示不出來。

【幾個(gè)網(wǎng)站例子】

紅嶺創(chuàng)投

<title>值得信賴的P2P網(wǎng)絡(luò)借貸平臺(tái)_紅嶺創(chuàng)投</title>
<meta name="author" content="m.my089.com" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-iphone72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone114.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-iphone144.png" />

天貓

<title>天貓觸屏版</title> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">     
<meta charset="utf-8">             
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
<meta content="yes" name="apple-mobile-web-app-capable">     
<meta content="black" name="apple-mobile-web-app-status-bar-style">     
<meta content="telephone=no" name="format-detection">

淘寶

<title>淘寶網(wǎng)觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ?m.taobao.com 版權(quán)所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">

京東

<title> 京東 - 手機(jī)版 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<meta name="Keywords" content="手機(jī)購物,WAP商城,日用百貨,3C家電,汽車用品"><meta name="description" content="京東手機(jī)版提供了包括數(shù)碼、家電、手機(jī)、電腦配件、網(wǎng)絡(luò)產(chǎn)品、日用百貨等數(shù)萬種商品，手機(jī)快捷購物，就上京東手機(jī)版。">

網(wǎng)易

<title>手機(jī)網(wǎng)易網(wǎng)</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">

百度

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">