移動前端小結-第一章。

標籤：

一直對移動項目不是很熟悉，做的很少，用的都是一些百分比，惡補了一下。

一.首先看下頭部。

<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>

 

移動前端小結-第一章。