轉(zhuǎn)載請注明預(yù)見才能遇見的博客：http://my.csdn.net/

原文地址：http://blog.csdn.net/pcaxb/article/details/56835751

<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">第一個meta標(biāo)簽表示：強制讓文檔的寬度(viewport寬度)與設(shè)備的寬度保持1:1,并且文檔最大的寬度比例是1.0,且不允許用戶點擊屏幕放大瀏覽；    width - viewport的寬度 height - viewport的高度 [device-width(設(shè)備的物理像素寬) | pixel_value] pixel_value是具體的像素值    案例:<meta content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">    initial-scale - 初始的縮放比例    minimum-scale - 允許用戶縮放到的最小比例    maximum-scale - 允許用戶縮放到的最大比例    user-scalable - 用戶是否可以手動縮放,這里有的資料寫成no有的寫成0第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽,它表示：允許全屏模式瀏覽；第三個meta標(biāo)簽也是iphone的私有標(biāo)簽,它指定的iphone中safari頂端的狀態(tài)條的樣式；    在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；    默認(rèn)值為default（白色）,可以定為black（黑色）和black-translucent（灰色半透明）。    注意：若值為“black-translucent”將會占據(jù)頁面px位置,浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。第四個meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。HTML5 META標(biāo)簽常用設(shè)置參考資料點擊打開鏈接點擊打開鏈接 點擊打開鏈接3.設(shè)備物理像素(設(shè)備像素),設(shè)備邏輯像素(設(shè)備獨立像素),代碼CSS像素,設(shè)備像素比設(shè)備物理分辨率(device pixels):物理分辨率也叫設(shè)備像素,物理分辨率是LED顯示屏顯示的圖像原始分辨率設(shè)備邏輯分辨率(device independent pixels):人對于物體真實尺寸的認(rèn)知(屏幕大小),設(shè)計使用邏輯像素來思考界面代碼CSS像素:CSS像素是Web編程的概念,獨立于設(shè)備的用于邏輯上衡量像素的單位,也就是說我們在做網(wǎng)頁時用到的CSS像素單位是抽象的,而不是實際存在的iphone 6為例(設(shè)備像素比是2):設(shè)備物理像素(設(shè)備像素):750x1334設(shè)備邏輯像素(設(shè)備獨立像素):375x667代碼CSS像素:375x667device-width(設(shè)備的物理像素寬):375 (1 CSS PX = 2 設(shè)備的物理像素)案例:iphone 6s 的物理像素是750x1334,JS中window.innerWidth就是獲取設(shè)備的物理像素,為什么window.innerWidth獲取的值是375而不是750呢?因為window.innerWidth的值是用CSS pixels來表示的,而iphone 6s的設(shè)備像素比是2,1 CSS PX = 2 設(shè)備的物理像素,所以window.innerWidth獲取的值是375px,而不是750px(750px = 375px * 設(shè)備像素比)在1倍率的屏幕上: 1 CSS PX = 1 設(shè)備的物理像素在2倍率的屏幕上: 1 CSS PX = 2 設(shè)備的物理像素設(shè)備像素比=設(shè)備像素/設(shè)備獨立像素(物理像素/邏輯像素)圖片實際像素 = 圖片邏輯像素/設(shè)備像素比
1倍：1pt=1dp=1px（mdpi、iPhone 3gs）2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）以iPhone 5s為例,屏幕的分辨率是640×1136,倍率是2。瀏覽器會認(rèn)為屏幕的分辨率是320×568,仍然是基準(zhǔn)倍率的尺寸。所以在制作頁面時,只需要按照基準(zhǔn)倍率來就行了。無論什么樣的屏幕,倍率是多少,都按邏輯像素尺寸來設(shè)計和開發(fā)頁面。只不過在準(zhǔn)備資源圖的時候,需要準(zhǔn)備2倍大小的圖,通過代碼把它縮成1倍大小顯示,才能保證清晰。HTML尺寸參考資料iPhone6界面設(shè)計尺寸規(guī)范大全:點擊打開鏈接為大屏為設(shè)計：以750x1334為標(biāo)注圖:點擊打開鏈接
devicePixelRatio = 1.5 引發(fā)的問題:點擊打開鏈接
設(shè)備物理像素(設(shè)備像素) 設(shè)備邏輯像素(設(shè)備獨立像素) 代碼CSS像素 設(shè)備像素比 viewport深入理解
博客地址：http://blog.csdn.net/pcaxb/article/details/56835751