Mobile Viewport & using REM to develop mobile websites

A wonderful explanation of the viewport of the Great God

Specific parameters for each model is supported see:

Http://www.cnblogs.com/2050/p/3877280.html#commentform

Extract:

Viewport on a mobile device: The area of the device on the screen that can be used to display our pages

Device pixel ratio: Docment.devicepixelratio = physical pixels/independent pixels

On the retina iphone, the value of Devicepixelratio is 2, meaning that 1 css pixels are equivalent to 2 physical pixels.

The width of the default viewport on some devices on the browser:

The pixels in the CSS are just an abstract unit, and in different devices or different environments, the physical pixels of the device represented by the 1px in the CSS are different.

Different devices have different ideal viewport. All iphone ideal viewport width is 320px, regardless of its screen width is 320 or 640, that is, in the iphone, the 320px in the CSS represents the width of the iphone screen.

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" > Role: The META tag's purpose is to make the current viewport width equal to the width of the device, while not allowing the user to scale manually.

In Apple's specification, Meta viewport has 6 attributes (for the moment, those things in content are called attributes and values), as follows:

	set layout viewport   width as a positive integer, or string " Width-device "
Settings page The initial scale value, which is a number, can be taken with decimal
allowed The minimum zoom value for a user, which can be a number with decimal
Allows the user's maximum zoom value to be a number, with decimal
Set the height of layout viewport  , this property is not important to us, very few use
user-scalable	Whether the user is allowed to scale, the value is "no" or "yes", no is not allowed, yes means allow

These properties can be used at the same time, or they can be used alone or mixed, and multiple properties are separated by commas when used simultaneously.

Visual Viewport width = Ideal viewport width  /Current zoom value

Dynamically change meta viewport Tags:

document.write (' <meta name= ' viewport ' content= ' width=device-width,initial-scale=1 ' > ')

A wonderful explanation of the rem desert thousand Butterflies:

Http://www.cnblogs.com/weinan/p/5842886.html

Mobile Viewport & using REM to develop mobile websites