移動WEB中的像素與Viewport

標籤：

裝置像素（Device Pixel）：　　顯示屏的最小物理顯示單位。手機裝置的螢幕參數（例如1920x1080）就是指的裝置像素。  裝置密度（PPI/DPI）：　　顯示屏每英寸的長度裡，所包含的裝置像素的數量。　　ios裡把PPI大於320的顯示屏稱之為Retina。android通過ldpi(120~160)、mdpi(160~240)、hdpi(240~320)、xhdpi(>320)來給顯示屏分等級。  裝置無關像素（Device Independent Pixel）：　　用於設定介面顯示的虛擬像素單位，裝置無關像素可以比裝置像素大或小。　　頁面的CSS像素，以及PC顯示器設定的解析度像素，就是指的這個像素。　　通過頁面的縮放，或設定顯示器的解析度，可以調整單個裝置無關像素的大小。  裝置像素比（DevicePixelRatio）：　　顯示屏容納的裝置像素和裝置無關像素數量的比值。在瀏覽器裡，這個值與頁面的縮放有關。　　部分瀏覽器的支援通過window.devicePixelRatio的方式擷取值。  Viewport：　　頁面html元素的父容器，html設定寬度為100%時，與viewport的寬度相等。在PC瀏覽器上，viewport的寬度與瀏覽器可視地區的寬度一致，在手機瀏覽器上則不一定，大多數手機瀏覽器預設的viewport寬度是980px。 　　在頁面中，可以通過<meta name="viewport" content="width=device-width"/>的方式來設定viewport的寬度，width的值可以是device-width，或一個整數。viewport的寬度單位是px，並且這裡的px指的是裝置無關像素（CSS像素）。因為不同機型和瀏覽器的預設縮放不一樣，通過這些瀏覽器開啟同一個未設定viewport的頁面時，頁面視覺上的寬度是不一樣的。ios的預設縮放策略是，頁面不出現捲軸，佔滿瀏覽器的可視地區，此時的裝置像素比 = 顯示屏的裝置像素寬度（單位是裝置像素px） / 預設viewport寬度（980px，單位是裝置無關像素px）。android的預設縮放策略，則各不一樣，有的跟ios一樣，有的是根據target-densitydpi的預設值medium-dpi來計算。 　　上面提到的width=device-width，那這個device-width的取值是多少呢？在不同的裝置上，單個裝置像素的大小不一樣，這樣的話，同一個頁面在這些裝置上的效果就會完全不一樣。要想解決這個問題，就需要在不同的裝置上顯示網頁時，所使用的CSS像素中，單個CSS像素的寬度是一樣的 。早期的裝置，例如第一個版本的iphone，3.5英寸大小，裝置像素是320，並且裝置像素與CSS像素相等。後來新裝置的裝置像素值越來越大，而螢幕大小沒有增加太多，這樣單個裝置像素的寬度就更小了，單個CSS像素需要包含多個裝置像素，才能保障單個CSS像素的大小和老版本的裝置基本相等，這樣每個裝置就產生了自己的理想裝置像素比。通過這個裝置的裝置像素寬度 / 這個理想的裝置像素比，就得到了device-width的取值，在ios上是320，在android上，有320、360、384、400等不同的取值。 　　在media query中device-width指的是裝置像素，與這裡的取值不一樣。

移動WEB中的像素與Viewport