一直對移動項目不是很熟悉，做的很少，用的都是一些百分比，惡補了一下。 一.首先看下頭部。 format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html里的一些格式的，那關於meta的format-detection屬性主要是有以下幾個設置：meta name="fo ...
一直對移動項目不是很熟悉，做的很少，用的都是一些百分比，惡補了一下。
一.首先看下頭部。
<meta name="format-detection" content="telephone=no, address=no, email=no">
format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html里的一些格式的，那關於meta的format-detection屬性主要是有以下幾個設置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以連寫：meta name="format-detection" content="telephone=no,email=no,adress=no"
下麵具體說下每個設置的作用：
一、telephone
你明明寫的一串數字沒加鏈接樣式，而iPhone會自動把你這個文字加鏈接樣式、並且點擊這個數字還會自動撥號！想去掉這個撥號鏈接該如何操作呢？這時我們的meta又該大顯神通了，代碼如下：
telephone=no就禁止了把數字轉化為撥號鏈接！
telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在預設是情況下就是開啟！
二、email
告訴設備不識別郵箱，點擊之後不自動發送
email=no禁止作為郵箱地址！
email=yes就開啟了把文字預設為郵箱地址，這個meta就不用寫了,在預設是情況下就是開啟！
三、adress
adress=no禁止跳轉至地圖！
adress=yes就開啟了點擊地址直接跳轉至地圖的功能,在預設是情況下就是開啟！
<meta name="apple-mobile-web-app-capable" content="yes" />
網站開啟對web app程式的支持。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
在web app應用下狀態條（屏幕頂部條）的顏色；
預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
1.viewport有道翻譯為“視口”；
通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在預設情況下，一般來講，移動設備上的viewport都是要大於瀏覽器可視區域的，這是因為考慮到移動設備的解析度相對於桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把自己預設的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的後果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個預設的viewport的寬度要小的。
如果不設置meta viewport標簽，那麼移動設備上瀏覽器預設的寬度值為800px，980px，1024px等這些，總之是大於屏幕寬度的。這裡的寬度所用的單位px都是指css中的px，它跟代表實際屏幕物理像素的px不是一回事。
下圖列出了一些設備上瀏覽器的預設viewport的寬度。
2.css中的1px並不等於設備的1px。
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻並非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的解析度為320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，解析度提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。其他品牌的移動設備也是這個道理。例如安卓設備根據屏幕像素密度可分為ldpi、mdpi、hdpi、xhdpi等不同的等級，解析度也是五花八門，安卓設備上的一個css像素相當於多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。
還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那麼css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。
在移動端瀏覽器中以及某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方的定義為：設備物理像素和設備獨立像素的比例，也就是
devicePixelRatio = 物理像素 / 獨立像素。 css中的px就可以看做是設備的獨立像素，所以通過devicePixelRatio，我們可以知道該設備上一個css像素代表多少個物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當於2個物理像素。但是要註意的是，devicePixelRatio在不同的瀏覽器中還存在些許的相容性問題，所以我們現在還並不能完全信賴這個東西。
3.content 屬性指定了 meta 信息的內容。可設置或者返回 meta 元素 content 屬性值。
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。
4.下麵是js動態控制相關值。
<script type="text/javascript"> var iScale = 1; iScale = iScale / window.devicePixelRatio; // 物理像素 / 獨立像素; 在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當於2個物理像素。 document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">') var iWidth = document.documentElement.clientWidth; document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px'; // 瀏覽器預設字體為16px; </script>
