Mobile Viewport & using REM to develop mobile websites

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.