devicePixelRatio，Viewport，移動端適配

1、什麼是Viewport

1.一、什麼是Viewport

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。

1.二、Viewport 基礎

一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：

width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。

initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
    maximum-scale：容許用戶縮放到的最大比例。
    minimum-scale：容許用戶縮放到的最小比例。
    user-scalable：用戶是否能夠手動縮放。

1.三、關於viewport的一些問題

viewport並不是只是ios上的獨有屬性，在android、winphone上一樣也有viewport。它們要解決的問題是相同的，即無視設備的真實分辨率，直接經過dpi，在物理尺寸和瀏覽器之間重設分辨率，這個分辨率和設備的分辨率無關。好比，你拿個3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，雖然設備的分辨率不一樣,物理尺寸也不一樣，但你能夠經過設置viewport讓它們在瀏覽器裏有相同的分辨率。好比說，你的網站是800px寬，你能夠經過設置viewport的width=800，來讓你的網站在這三個不一樣的設備上都恰好滿屏顯示你的網站。

devicePixelRatio

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
    公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip能夠用來輔助區分視網膜設備仍是非視網膜設備。

對於視網膜屏幕的iphone，如iphone4s, 縱向顯示的時候，屏幕物理像素640像素。一樣，當用戶設置 的時候，其視區寬度並非640像素，而是320像素，這是爲了有更好的閱讀體驗 – 更合適的文字大小。

這樣，在視網膜屏幕的iphone上，屏幕物理像素640像素，獨立像素仍是320像素，所以，window.devicePixelRatio等於2.

移動適配

頁面根據devicePixelRatio獲得縮放比例，設置scale

var b=document.querySelector('meta[name="viewport"]')||document.createElement("meta");
    b.setAttribute("name","viewport");
    var a=(c=window.devicePixelRatio)?1/c:1;
    document.documentElement.setAttribute("data-dpr",1);
    b.setAttribute("content","width=device-width,initial-scale=1, maximum-scale="+a+", minimum-scale="+a+", user-scalable=no,viewport-fit=cover");
    document.head.appendChild(b);

設置html的fontSize

var a=100/750*document.documentElement.offsetWidth;
    document.querySelector("html").style.fontSize=a+"px";

版權申明：本文由objJs原創，容許轉載，但轉載必須附註首發連接。謝謝