HTML5 mobile app development -- Role of viewport -- 20150216, html5viewport

HTML5 mobile app development -- Role of viewport -- 20150216, html5viewport

 

When using HTML5 to develop mobile apps or mobile Web pages, the

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

What is Viewport?

The mobile browser places the page in a virtual "window". Generally, this virtual "window" is wider than the screen, in this way, you do not need to squeeze each webpage into a small window (this will damage the layout of the webpage that is not optimized for the mobile browser). You can view different parts of the webpage through translation and scaling. The mobile Safari browser recently introduced the meta tag viewport, which allows web developers to control the size and scaling of viewport. Other mobile browsers also support the meta tag.

Width:Controls the viewport size. You can specify a value if it is 600 or a special value, for example, if device-width is the width of the device (unit: CSS pixel when it is scaled to 100% ).
Height:Corresponds to width and specifies the height.
Initial-scale:The initial scaling ratio, that is, the scaling ratio when the page is loaded for the first time.
Maximum-scale:The maximum scale that users can scale.
Minimum-scale:The minimum allowed scale.
User-scalable:Can users manually Scale

　　"Viewport"Which can be translated into Chinese"View area"As we all know, mobile devices generally have much smaller screens than PCs. webkit will map a large "virtual" window to the screen of mobile devices, the default virtual window is 980 pixels wide (currently the standard width of most websites), and then scales according to a certain ratio (OR. That is to say, when we load a common webpage, webkit will first load the webpage according to the browser standard of 980 pixels, and then reduce it to the width of 490 pixels. Note that this downsize isGlobal reductionThat is, all elements on the page are reduced. As shown in, the effect of a Common article page on mobile devices is as follows:

　　The page is loaded in 980 pixels without deformation, but after proportional scaling, many things are invisible to the naked eye.

So can we manually change the webkit's view area? Of course, the following code is added between

<meta name="viewport" content="width=500"/>

Let's take a look at the page Force view area size commandAfter the effect? As shown in: Is there any better way? For example, we automatically detect the screen size of a mobile device and make the content adaptive. See the following code, Device-width: Automatically detects the screen width of a mobile device.:

<meta name="viewport" content="width=device-width" />

Source: http://www.cnblogs.com/duanhuajian/archive/2012/10/31/2748644.html