Mobile phone viewport and mobile phone viewport

Mobile phone viewport and mobile phone viewport

Window. devicePixelRatio
This read-only property returns the ratio of the resolution inPhysical pixelsTo the resolution inCSS pixelsFor the current display device.
This value is the ratio between resolutions, rather than comparing pixels directly. Resolution refers to the number of pixels in an inch, similar to the PPI.
The dpr value in the pc browser is 1, so the 1px element in css occupies 1 physical pixel in the screen.
But on the mobile phone end, because of the appearance of high-split screens, the relationship between physical pixels and css logic pixels is not 1-to-1. For example, if dpr in iPhone 5 is 2, two physical pixels correspond to one logical pixel.
In addition, scaling also changes the corresponding relationship.

Viewport

The width of the

Document.doc umentElement. clientWidth, gives the dimensionsof the viewport, and not of the

Screen. width: the size of the screen. You're not interested in the physical size ofthe screen, but in how many CSS pixels currently fit on it.

Media queries: uses different styles for elements of different sizes.

Web developers are not interested in the devicewidth; it's the width of the browser window that counts. So use width and forgetdevice-width-on desktop.

Mobile phone

Mobile browser vendors want to offer theirclients the best possible experience, which right now means "as much likedesktop as possible. "That, however, requires viewport to be split into two: the visual viewport and thelayout viewport. (In order to display website content on pc browsers on mobile devices, the concept of virtual layout viewport is introduced .)
TheVisual viewportIs thepart of the page that's currently shown on-screen. The user may scroll to changethe part of the page he sees, or zoom to change the size of the visualviewport.
How wide is the layout viewport? That differsper browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, andIE 974px. Therefore, the content of the pc page can also be viewed on the mobile phone, but it will be reduced to a small value.
You can change the orientation of the frame (visual viewport), but the size andshape of the large image (layout viewport) never changes.

 

Zooming

Specified mobile browsers initially show any page infully zoomed-out mode. most browsers zoom out to show the entire layoutviewport on the screen. browsers have chosen their dimensions of the layoutviewport 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 ofthe layout viewport are equal to whatever can be shown on the screen in themaximally zoomed-out mode. when the user zooms in these dimensions stay thesame.

Measuring the visual viewport

Visual viewport, it is measuredwindow.innerWidth/Height, It shows how to adjust CSS pixels currently fit on the screen. obviusly the measurements change when the user zooms out or in, since more orfewer CSS pixels fit into the screen.

Event coordinates

pageX/YIs still relative to the page in CSS pixels.

screenX/YIs relative to the screen in device pixels, this is the same reference thatclientX/YUses, and device pixels are useless.

Meta viewport

 <metaname="viewport" content="width=320">

It is meant to resize the layout viewport. Because the default layoutviewport of the Mobile End is larger than that of the visualviewport, the layoutviewport attribute is controlled through the meta tag to achieve better display effect.

When width = device-width is set, layout viewport is as wide as visual viewport, but the screen scales to a certain ratio to display all content.

 

The zoom operation controls the visualviewport;

Once the layoutviewport is initialized, it will not change. You can control the layoutviewport through the attributes of the meta tag.

Display Effect of apple 6 (it is often difficult to automatically refresh during chrome testing. You 'd better click Toggledevice toolbar to view it)

The dpr of apple 6 is 2 and the physical resolution is 1334*750. Therefore, the inner width of visual viewport can display 375 css pixels.

When meta is not set, safari's default layout viewport is 980px. If the page width is smaller than the layoutviewport width, 980px is displayed. Otherwise, safari will zoom out until all layout viewports are displayed in the visual point.

If you set the width and initail-scale, it scales to the appropriate proportion without a scroll bar.

 

 

If initial-scale = 1.0 is set again, the system will not scale and a scroll bar will be generated. All content will be displayed by moving:

 

This document is excerpted from A tale of two viewports and provides A clear introduction to related concepts.