IT工程師數位筆記本

　　注：本文是學習筆記，并不是教程，所以會有很多我不理解或猜測的問題，也會有不盡詳實之處，望見諒。

<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta name="data-spm" content="a215s">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

　　以上是我于2015.4.10摘自m.taobao.com的head中的meta標簽

　　下面就一個個研究過去吧：

　　1、<meta charset="utf-8">

　　不算移動端知識：charset 屬性是 HTML5 中的新屬性

　　替換了：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

　　減少了代碼量

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

　　設置Web應用是否以全屏模式運行（說是iphone私有屬性，但是我在小米上測試了一下也成功了居然）。

　　但我在手機中的safari和chrome中測試效果都不太理想，只有當頁面往下滑動時，頂部瀏覽器窗口才會隱藏，一旦往上滑動，瀏覽器窗口就會出現。

　　這樣的效果太不理想，所以還需代碼上另做配合：

　　淘寶觸屏版顯然在此處又有心機（這心機表=，=）。

　　顯然，固定窗口高度是必須的。設置overflow和height后，瀏覽器便不會 移動，所以頂部的瀏覽器窗口在用戶第一次下滑導致隱藏后，便會一直隱藏，因為之后的滑動都是對fullscreen這個里面的窗口操作的。

　　還有一點十分重要：

　　　　在以上設置之后，要像淘寶網觸屏版一樣，在載入頁面時就隱藏瀏覽器窗口，使之更像app，還必須加一句js

<script>
    window.scrollTo(0, 0);
</script>

　　　　使瀏覽器頁面滑動到頂部，這樣，瀏覽器的那個地址欄就會在載入時就自動隱藏了！

　　題外話：

　　　　淘寶還重自定義了內層窗口的滑動效果，原理是變動層的transform: translate3d（x,y,z），這個以后再討論。

　　　　不過，淘寶有一個設置了position:fixed的頂部搜索欄。

　　　　這個是獨立在fullscreen（那個設置了overflow的層）外的。 所以按住這個在滑動頁面，便被視為滑動瀏覽器窗口，瀏覽器窗口就會再次出現。

　　3、<meta content="yes" name="apple-touch-fullscreen">

　　蘋果設備的safari有一項功能，可以按以下方法，將網頁保存到主屏幕，此項meta是設置當這樣的情況下，打開時默認全屏。

<link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="apple-touch-icon-precomposed">

　　此行為設置保存到主屏幕時 的圖標。

　　4、<meta name="data-spm" content="a215s">

　　此項meta與移動端無關，是淘寶xTao為外部合作伙伴提供的一套跟蹤引導成交效果數據的解決方案。

　　簡單來說，就是類似cnzz的流量分析系統。

　　詳細請參考淘寶開放平臺：http://open.taobao.com/doc/detail.htm?id=959

　　5、<meta content="telephone=no,email=no" name="format-detection">

　　禁止移動設備將數字識別為手機號碼，不識別郵箱

　　6、<meta content="fullscreen=yes,preventMove=no" name="ML-Config">

　　應該是和第4條一樣，為淘寶的自定義meta，用于控制第2條meta中所設定的內容

　　7、<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

　　本條可以說是移動端必備，用于控制當前頁面的縮放比例。

　　網上資料很多，不再贅述，找了幾個園內的:

　　（1）http://www.cnblogs.com/loalongblogs/archive/2011/06/21/2085971.html

　　（2）http://www.cnblogs.com/2050/p/3877280.html

　　End、結束小宣傳

　　　　模板世界（www.templatesy.com），分享、下載最新最全的網站模板。