Viewport, that's what happened.

Objective

For mobile WebApp developers, viewport is a very important thing, easy to use but often do not understand, so I am determined to understand it.

<name= "Viewport"  content= "Width=device-width, initial-scale=1, Maximum-scale=1, minimum-scale=1, user-scalable=no ">

Viewport the units involved

Resolution: How many pixels the device display can display

DPI (dots per inch): dots per inch density

PPI (Pixels per inch): pixel dots per inch

PS: The PPI and DPI are all the same in the computer or mobile screen, and the higher the PPI is, the clearer the content will appear.

What is viewport?

In fact, the mobile browser loading page is placed in a middleware inside, and this middleware is viewport. (originally made by iOS, then Android borrowed)

Viewport Important concepts

1. Visual area: The area where the page is visible on our device (this length is not fixed).

2. Device width (device-width): This is the width of the CSS, which is equivalent to the width of the viewable area when the page is not zoomed.

Ps:device-width General value range is 320-432

Viewport Property

Width of the Width:viewport

Height of height:viewport (rarely used)

Initial-scale: Set the initial zoom value of the page

Minimum-scale: Minimum zoom value allowed for user

Maximum-scale: Maximum zoom value allowed for user

User-scalable: Whether users are allowed to zoom

TARGET-DENSITYDPI (Android only takes effect): density level of the device

PS: It is not necessary to speak all of the above attributes, I figure out the most important of the three properties, I can understand viewport

Viewport important attributes

Three important attributes are width, Initial-scale, target-densitydpi (this attribute is put back)

Width and initial-scale combination settings, there are four different situations (Android set Initial-scale invalid, this is said, first on iOS), iphone4s (its device width is 320) on the test:

1. Set width (fixed value), not set Initial-scale

The iOS browser will automatically calculate the zoom ratio in order to adjust the page for full screen display, i.e. Initial-scale

Example: Setting width=640

Viewport width = 640px

Zoom ratio = 320/640 = 0.5

Viewable area width = device width/Zoom ratio = 320/0.5 = 640px

PS: The calculation formula for the width of the visible area above is the one I tested, but I looked back at some of the introductory viewport articles, and they also introduced them.

2. Set width (fixed value), Set Initial-scale = 1.0

Example: Setting width=640

Viewport width = 640px

Zoom ratio = 1.0

Viewable area width = device width/Zoom ratio = 320/1.0 = 320px

PS: So if this is set, the page will appear only half the case.

3. Set width to Device-width, not set Initial-scale

Without a initial-scale case, Initial-scale has been 1.0

Example: Setting Width=device-width

Viewport width = 320px (iphone4s device width)

Zoom ratio = 1.0

Viewable area width = device width/Zoom ratio = 320/1.0 = 320px

4. Set width to Device-width, set Initial-scale = 0.5

Example: Setting Width=device-width

Viewport width = 320px (iphone4s device width)

Zoom ratio = 0.5

Viewable area width = device width/Zoom ratio = 320/0.5 = 640px

PS: The page displayed at this time is 640px wide

Speaking of which, we should have a certain understanding of the various ways of setting viewport.

Viewport's Android

The reason why Android is taken out here is that the TARGET-DENSITYDPI (later Android version will be discarded) is a problem with this property.

For Android, Initial-scale is not valid on most models, either 0.5 or 2, but this does not affect our use of viewport.

Target-densitydpi This property sets what DPI display the device uses, in fact, in my understanding, it is actually a function of scaling.

TARGET-DENSITYDPI: Can be a numeric value or one of several strings of high-dpi, medium-dpi, low-dpi, device-dpi.

Some special values:

low-dpi:120

medium-dpi:160

high-dpi:240

xhdpi:320

xxhdpi:400

PS: In the case of not setting, the default selection is medium-dpi (but some models are not the default, like Xiaomi 1 default is high-dpi)

Setting target-densitydpi These values will result in what kind of scaling?

The ratio of scaling is the ratio to medium-dpi:

120/160 = 0.75

160/160 = 1 (Huawei Glory xx device-dpi)

240/160 = 1.5 (mi 1 device-dpi)

320/160 = 2 (Lenovo Lemon device-dpi)

400/160 = 2.5 (Meizu blue device-dpi)

PS: The following brackets are the models that I tested, their respective device-dpi.

For example:

1. When you set target-densitydpi = 240:

Huawei Glory xx Viewable area width = device Width * DPI ratio = 360 * 1.5 = 540

Xiaomi 1 Viewable Area width = device Width * DPI ratio = 320 * 1.5 = 480

Lenovo Lime Viewable Area width = device Width * DPI ratio = 360 * 1.5 = 540

Phantom Blue viewable Area width = device Width * DPI ratio = 432 * 1.5 = 648

2. When you set target-densitydpi = device-dpi:

Huawei Glory xx Viewable area width = device Width * DPI ratio = 360 * (160/160) = 360

Xiaomi 1 Viewable Area width = device Width * DPI ratio = 320 * (240/160) = 480

Lenovo Lime Viewable Area width = device Width * DPI ratio = 360 * (320/160) = 720

Phantom Blue viewable Area width = device Width * DPI ratio = 432 * (400/160) = 1080

PS: Based on the above conclusions, I strongly recommend that you do not use target-densitydpi = device-dpi, because the width of the final viewable area on different devices varies greatly, unless your app is working on it (REM, EM relative unit notation).

Viewport's stuff is also about here!

Attention:

1. When viewport width set a fixed value?

When your page is a fixed width, or the element inside is long and the font size is displayed in a certain width, it looks normal.

2. Precautions for fixing viewport width

When the device to switch between the screen, you need to switch the width of the viewport, and the phone and tablet viewport width is also different.

How much is the width of 3.viewport mostly small?

When width is less than the width of the device, it doesn't make sense to think about how big it is to set the width of the device.

Summarize:

Actually said so much, in fact, back to the beginning of the code, and the final proposal set of the viewport is also that sentence, also hope that I think everyone can understand, if there is wrong place please correct me.

Attach iOS to Viewport: Configuring the Viewport

This article for the original article, reproduced please retain the original source, convenient traceability, if there is the wrong place, thank you correct.

This address: http://www.cnblogs.com/lovesong/p/4355029.html

Viewport, that's what happened.