手機端的viewport屬性

時間 2019-11-11

原文原文鏈接

Window.devicePixelRatio
This read-only property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
該值爲分辨率之間的比，不是直接比較像素。分辨率是指單位英寸內像素數，相似於PPI。
pc端瀏覽器中dpr的值都爲1，因此css中1px的元素在屏幕中佔據1物理像素。
但在手機端，由於高分屏的出現，物理像素和css邏輯像素並非1比1的關係。好比iPhone5中的dpr爲2，就是4個物理像素對應1個邏輯像素。css

在不一樣的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現的大小(物理尺寸)是一致的，不一樣的是1個css像素所對應的物理像素個數是不一致的。html

在普通屏幕下，1個css像素對應 1個物理像素(1:1)。在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。chrome

另外縮放也會改變這種對應關係。瀏覽器

viewportless

The width of the <html> element is restricted by the width of the viewport. The <html> element takes 100% of the width of that viewport.The viewport, in turn, is exactly equal to the browser window: it’s been defined as such.（html的寬度由viewport的寬度決定）ide

document.documentElement.clientWidth，gives the dimensions of the viewport, and not of the <html> element。獲取瀏覽器可視窗口的寬度（若是有滾動條時，不含滾動條的寬度）。測試

screen.width：屏幕的尺寸大小。You’re not interested in the physical size of the screen, but in how many CSS pixels currently fit on it.網站

Media queries：針對不一樣尺寸的元素使用不一樣的樣式。ui

Web developers are not interested in the device width; it’s the width of the browser window that counts.So use width and forget device-width — on desktop.this

手機端

Mobile browser vendors want to offer their clients the best possible experience, which right now means 「as much like desktop as possible.」 That, however, requires viewport to be split into two: the visual viewport and the layout viewport. （移動端屏幕都很小，爲了能在移動設備上顯示pc瀏覽器上的網站內容，引進了虛擬的layout viewport的概念，用戶經過左右滑動滾動條顯示頁面內容。）
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.（每一個廠商默認的layout viewport寬度不同，有980px，1080px等不一樣尺寸）
You can change the orientation of the frame(visual viewport), but the size and shape of the large image (layout viewport) never changes.
The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.（移動設備屏幕尺寸就是visual veiwport）

Zooming

Many mobile browsers initially show any page in fully zoomed-out mode. Most browsers zoom out to show the entire layout viewport on the screen. browsers have chosen their dimensions of the layout viewport such that it completely covers the screen in fully zoomed-out mode (and is thus equal to the visual viewport). Thus the width and the height of the layout viewport are equal to whatever can be shown on the screen in the maximally zoomed-out mode. When the user zooms in these dimensions stay the same.（在沒有meta標籤時，默認瀏覽器會縮小頁面，直到在visual viewport 內徹底顯示 layout viewport）

Measuring the visual viewport

visual viewport, it is measured by window.innerWidth/Height,it shows how many CSS pixels currently fit on the screen. Obviously the measurements change when the user zooms out or in, since more or fewer CSS pixels fit into the screen.

Event coordinates

pageX/Y is still relative to the page in CSS pixels.

screenX/Y is relative to the screen in device pixels, this is the same reference that clientX/Y uses, and device pixels are useless.

Meta viewport
爲了使移動端的顯示效果更像pc端，全屏顯示全部內容，不能縮放，沒有滾動條，因此頁面經常配置meta標籤。
<meta name="viewport" content="width=320">It is meant to resize the layout viewport. 由於移動端默認的layout viewport比visual viewport大，因此經過meta標籤控制layout viewport的屬性達到更好的顯示效果。

當設置width=device-width時，layout viewport就和visual viewport同樣寬，可是屏幕會縮放到必定比率以顯示全部內容。

縮放(zoom)和移動操做控制的是visual viewport；layout viewport一旦初始化好後，就不會再變；能夠經過meta標籤的屬性控制layout viewport。

蘋果6的顯示效果（經過chrome測試時自動刷新常有問題，最好再次點擊Toggle device toolbar查看）

蘋果6的dpr爲2，物理分辨率爲1334*750，因此visual viewport內寬能夠顯示375個css像素。

沒有設置meta時，safari默認的layout viewport爲980px，若頁面的寬度小於layout viewport的寬度，則顯示980px。不然safari會不斷縮小（zoom out）頁面直到所有layout viewport在visual point中顯示爲止。

若是設置width而不設定initail-scale的話，會縮放到合適比例，沒有滾動條。

若是再設置initial-scale=1.0，則不會進行縮放，但會產生滾動條，經過移動來顯示所有內容，以下

摘自A tale of two viewports，對相關概念介紹的很是清楚。