Use the view META tag to control the phone browser layout

The Fennec of a mobile browser is rendered in a virtual "window" page (see), usually wider than the screen.
So they don't have to squeeze each page layout into a small window (which destroys many non-mobile optimized sites). Users can pan and zoom to see different areas of the page.

Mobile Safari Browser launches the viewport META tag, allowing web developers to control the size and scale of the viewport.
This tag is supported by many other mobile browsers, although it is not part of any Web standard.
Apple's documentation does a good job of explaining how Web developers can use this tag, but we have to do some detective work to find out exactly how it's fennec.
For example, Safari's file says that content is a "comma-delimited list," but existing browsers and Web pages use commas, semicolons, and any combination of delimited spaces.

Learn more about the two viewport stories in different mobile browsers in quirksmode.org.

A typical mobile-optimized site contains something like the following:

<meta name= "viewport" content= "Width=device-width, initial-scale=1" >

The Width property controls the size of the viewport. It can be set to the exact number of pixels of the same width = 600 or for a special value the device width is the value of the width of the CSS pixel in the 100% scale of the screen.
(There is a corresponding height and device height value, which may be useful for web pages that vary in size or position elements based on the apparent height.) ）

The initial scale attribute controls the page zoom level at the first load. The maximum scale, minimum scale, and user-extensible properties control how users can allow zoomed-in pages or shrinks.

Pixels are not pixels
The iphone and many popular Android phones have a 3 to 4 inch (7-10 cm) screen, 320-480 pixels (?).
The Firefox browser runs the Maemo Nokia N900, which has the same physical size but 480-800 pixels (.).
Because of this, the last version of the little Fox is shown to be about one-third smaller (in actual physical size) than many pages of the iphone or Android.
This raises the usability and readability issues of many touch-optimized sites. Peter Paul Koch wrote a pixel about this problem is not a pixel.

Fennec's 1.1 Maemo platform will be used for every CSS 1.5 hardware pixel "pixel", Android's WebKit-based browser took direction.
This means that with the initial size of the page = 1 will be rendered in the same physical size as the Maemo operation, mobile Safari browser for iphone, and simultaneously in Android browser hdpi and mdpi phones.
This is consistent with the CSS 2.1 specification, which says:

If the pixel density of the output device is very different from a typical computer display, the user agent should readjust the pixel value.
It is recommended that pixels in pixels refer to the pixel of the entire number of devices closest to the reference pixel. So it is recommended to refer to pixels as a pixel with 96DPI pixel density and the length of the arm from the reader's
The visual angle on the device from the distance.
For web developers, this means that 320 pixels are in scale = 1 portrait mode full width, in all of the above handheld devices, they may scale the layout and corresponding images.
But keep in mind that not all mobile devices are the same width; You should also make sure that your Web page works well in landscape mode and is larger on devices such as ipads and Android tablets.

At a DPI screen, the initial size of the page = 1 effectively amplifies both Fennec and Android WebKit to 150%.
Their text will be smooth and clear, but their bitmap images may not take advantage of full screen resolution.
To get clear images on these screens, web developers may need to design images-or the entire layout-in their final size of 150% (or 200%, devices that support the
such as Retina display iphone), and then extend down using CSS or view properties.

The default ratio depends on the display density. The display on the density is less than 200DPI, and the ratio is 1.0. The 200 and 300dpi densities show that the ratio is 1.5.
For displays with a density of more than 300dpi, the ratio is an integer floor (density/recommended 150dpi resolution).
Note that the default ratio is true only if the viewport scale equals 1, and the relationship between the CSS pixel and the device's pixels depends on the current zoom level.

Many sites set their viewport "WIDTH = 320, Initial size = 1" To fit the iphone display in portrait mode.
As mentioned above, this raises the problem when the Fennec 1.0 renders the site, especially in landscape mode. To solve this problem, the Fennec of 1.1 will enlarge the viewport width,
If necessary on the scale required to fill the screen. This is especially useful with Android and mobile Safari browser behavior, and it's a big screen device like the ipad.
(Allen Parker's choice for the ipad site viewport is a good explanation for Web developers.) ）

For setting up an initial or largest page, this means that the Width property is actually converted to a minimum viewport width.
For example, if your layout requires a minimum width of 500 pixels, then you can use the following markup. When the screen is over 500 pixels wide, the browser expands the view (rather than zooming in) to fit the screen:

<meta name= "viewport" content= "width=500, initial-scale=1" >
Little Fox 1.1 has also been added to support the smallest size, maximum size and user-extensible, with default values and similar restrictions for safari.
These properties affect the initial scale and width, as well as the change in the zoom level limit.

The mobile browser changes slightly in the processing direction. For example, when you change from portrait to landscape, instead of laying out on a webpage, as it would if originally mounted in a landscape move safari tends to just zoom in on the page.
If Web developers want to switch directions on the iphone when their size is set to stay consistent, you must add a maximum value to prevent this zoom, which has blocked the user from zooming in
The sometimes harmful side effects are:

<meta name= "viewport" content= "initial-scale=1, maximum-scale=1" >
It is not necessary to Fennec; When the device changes direction, the small fox updates the viewport size, page layout and Javascript/css properties, such as the width of the device, according to its new window size.

Common viewport size phones and tablet devices
If you want to know what cell phones and tablet devices have the width of the viewport, there's a full list of the sizes of the phones and tablet windows here.
This makes information such as the width of the viewport in portrait and landscape as well as the physical screen size, operating system and device pixel density.

Viewport: The original meaning of the dictionary is perspective, viewport, detection area.
The viewport attribute of meta tags in web pages is what it means, what it does, and the following is a brief description.

Viewport attributes for each parameter:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">

The width of the width:viewport can be specified as a pixel value, such as: 600, or as a special value, such as: device-width (width of the device).

The height of the height:viewport.

Initial-scale: The initial scaling ratio, which is the scale at which the browser loads the page the first time.

Maximum-scale: The maximum scale that allows the browser to zoom to, typically set to 1.0.

Minimum-scale: The minimum scale that allows the browser to zoom to is generally set to 1.0.

User-scalable: Whether the browser can zoom manually, yes or No.

For mobile browser Browsing page, viewport is often set as follows:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1″>

Use the view META tag to control the phone browser layout