Mobile front-end first bullet: viewport detailed

Objective

This time I want to talk about mobile development related things. Yes, you are not mistaken, a word can start your mobile front-end development.

You must be thinking, what is so cool, can instantly into the mobile front-end development of the world.

But in fact it is not novel, not complex.

Viewport Introduction

Yes, it's viewport a feature, a mobile-specific Meta value that defines the various behaviors of the viewport.

This feature was first Apple introduced to solve the mobile page display problem, followed by more and more vendors follow up.

For a simple example, why would you need it:

We know that users use mobile devices such as mobile phones to carry out web browsers, in fact, thanks to the rise of smart handheld devices, that is, in recent years. (Remember the last few years, full street is still the world of Nokia?) ）

At this time there is a very real problem in front of the manufacturers, users are not very good through the mobile phone and other devices to access the Web page, because the screen is too small.

Layout viewport

AppleAlso found this problem, and in due course, it proposed a solution to solve the problem. A label has been defined in iOS Safari to viewport meta create a virtual one 布局视口（layout viewport） , and this viewport has a resolution close to the PC display, Apple defined as 980px (the other vendors have different ①).

This is a good solution to the earlier page on the phone display problems, because the width of the two closer, CSS just like on the PC to render the page, the original page structure will not be destroyed.

① 's description is roughly as follows, the value is not always accurate and the manufacturer may change it, but this absolute value is not particularly important:
IOS, Android is basically: 980px
Blackberry:1024px

Visual viewport

With layout viewport that, we also need a viewport to carry it, and this viewport can simply be thought of as a visual area of the physical screen of a handheld device, as we call it （视觉视口）visual viewport . This is a more intuitive concept because you can see the screen of your phone.

For visual viewport , the developer generally only need to know its existence and concept of the line, because it can not be set or modified. Obviously, visual viewport the dimensions will not be a fixed value, and even each device may be different. The dimensions of several common devices are roughly listed visual viewport :

• iphone4~iphone5s:320*480px
• Iphone6~iphone6s:375*627px
• IPhone6 plus~iphone6s plus:414*736px

iPhone4SFor example, in its 320px② visual viewport , create a wide 980px layout viewport , so that users can visual viewport drag or zoom in the page to achieve good browsing effect; layout viewports are used in conjunction with CSS rendering layouts when we define a container with a width of 100%, the actual width of this container is 980px rather than 320px , in this way, most of the Web page can be displayed in the form of scaling normal to the phone screen.

The description of ② is as follows:
Early mobile front-end development engineers often see designs with a width of 640px, because UI engineers use a physical screen width of 320px iPhone4-iPhone5S as the reference design;
Of course, you may also see design drafts for 750px and 1242px sizes, of course, because of IPhone6 's appearance.

Of course, it is not enough to have a single layout viewport and a visual viewport for a better fit on the mobile side or for applications designed for mobile only.

Ideal Viewport

We also need a viewport, which is similar to the layout viewport, but the width is the same as the visual viewport, which is the perfect viewport (ideal viewport).

With the perfect viewport, users don't have to zoom and drag a page to get a good view of the web. The perfect viewport is also viewport meta a certain setting to achieve.

Said so a lot of things, seemingly all viewport related, so viewport how to do, please continue down.

With regard to the 3 viewports, PPK has done a great job of explaining this, and you can also StackOverflow find some complementary additions to this description, such as: [1], [2], interested children's shoes can also see

Viewport characteristics

Typically, the viewport following 6 settings are available. Of course, the vendor may add some specific settings, such as iOS Safari7.1 adds a setting that hides the address bar and navigation bar when the page loads: minimal-ui But then removes it.

Name	Value	Description
Width	Positive integer ordevice-width	Defines the width of a viewport in pixels
Height	Positive integer ordevice-height	Defines the height of the viewport, in pixels
Initial-scale	[0.0-10.0]	Defining initial scaling values
Minimum-scale	[0.0-10.0]	Defines the minimum scale to be reduced, which must be less than or equal to the Maximum-scale setting
Maximum-scale	[0.0-10.0]	Defines the magnification maximum scale, which must be greater than or equal to the Minimum-scale setting
User-scalable	Yes/no	Defines whether the user is allowed to manually scale the page, the default value is Yes

Width

widthis used to define layout viewport the width, if you do not specify the attribute (or remove the viewport meta label), the layout viewport width is the vendor default value. such as: the iphone is 980px ;

As an example:

1	Name= "viewport" content="Width=device-width"/>

This layout viewport will become ideal viewport , because the layout viewport width is consistent with the device visual viewport width.

Besides width , there is also a property definition that can be implemented ideal viewport , that is initial-scale .

Height

widthsimilar, but actually not used, because there are not too many use case.

Initial-scale

If you want the page to zoom in or out by default at a certain scale and then present it to the user, you can do so by definition initial-scale .

initial-scaleUsed to specify the initial scale of the page, assuming that you define:

1	Name= "viewport" content="initial-scale=2"/>

Then the user will see twice times the size of the page content.

When we say it, width we initial-scale can do it, ideal viewport Yes, you just have to do it, and you get the perfect viewport:

1	Name= "viewport" content="initial-scale=1"/>

Maximum-scale

On the mobile side, you may consider the user browsing inconvenience, and then give the user the right to enlarge the page, but also want to be within a certain range of amplification, then you can use maximum-scale to constrain.

maximum-scaleUsed to specify the scale at which the user can zoom in.

As an example:

1	Name= "viewport" content="initial-scale=1,maximum-scale=5"/>

Assuming the default zoom value of the page initial-scale is 1 , the user will eventually be able to enlarge the page to 5 times times the size of the initial page.

Minimum-scale

A similar maximum-scale description, but minimum-scale is used to specify the page scaling.

Typically, in order to have a better experience, the value of the property is not defined to be smaller 1 , because the page becomes difficult to read.

User-scalable

If you don't want the page to be zoomed in or user-scalable out, define to constrain whether the user can zoom in and out of the page by gesture.

The default value of this property is to yes be scaled (this property can be undefined if the default value is used); Of course, if your app does not intend to have the user have the Zoom permission, you can set the value to no .

Here's how to use it:

1	Name= "viewport" content="User-scalable=no"/>

Conclusion

As the opening point says, it is neither advanced nor novel, it is merely a change of concept.

When you have mastered it viewport , it means that you have a general understanding of the difference between a mobile platform and a PC platform, and you can focus on and carefully address some of the platform differences.

Mobile front-end first bullet: viewport detailed