Almost all mobile pages add this tag:

But the following questions may be confusing:

  • Is the value of device-width the same on different devices?
  • Width =700, initial-scale=0.5, what is the actual width of the page? What happens when the horizontal screen transitions?
  • How is the behavior different if you drop initial-scale=0.5, or width=700?


This article will explain these issues and explain the three meanings of the ViewPort tag, with a summary at the end.

The viewport and scale

To make it easier to understand, let’s not get involved in complicated definitions, but use data examples to explain. Take iPhone4 as an example.

Viewport:

When viewPort =500, the browser canvas is 500px wide. Calling $(“body”).width() on this page yields “500”.

Scale:

When scale=1, the device will fit 320px vertically and 480px horizontally.

When scale=0.5, the device will hold 640px screen width vertically and 960px screen width horizontally.

When the screen width is smaller than the canvas width, drag the page to create a scroll bar like this:

The relationship between viewPort and scale

Although viewport and scale are defined in a meta tag, they are actually two separate properties.

Conceptually, the number of pixels on the canvas has nothing to do with how many pixels can fit on the screen; together, they determine the current state of the page.

But, confusingly, viewport and Scale do interact.

Because of the following conditions:

Width = 320, initial – scale = 0.5



Scale =0.5, the screen width is 640px, but the viewport is only 320px, that is, the canvas is not enough to cover the screen at this setting.

This situation is generally not allowed by modern browsers.

To fill the screen with canvas, we need viewPort and scale to work together.

Viewport and scale automatic adjustment

Our browser automatically adjusts viewPort and scale to spread the canvas across the screen, so their actual values are not necessarily the ones you set in the label.

Here is an example of how automatic adjustment works.

If initial-scale is null, only viewport width is set.

Such as:

When initializing or scrolling, viewPort is left unchanged, and scale is adjusted to fill the screen width.

In this case, landscape does not increase the width of the page, it just enlarges it.


If the initial – scale is not empty

Such as:

When initialized or flipped horizontally, scale stays the same, and if the viewPort is insufficient to fill the screen width, change the viewPort to fill the screen width.


About Default Settings

Default Settings for the browser:

Viewport =980, initial-scale is null,

By default, the width of the 980 canvas is close to that of a PC, and the canvas doesn’t get wider with landscape, it just enlarges.

This is designed to be compatible with PC pages, and you can imagine how fragmented a non-optimized PC page would be if it were 320px wide.

It’s worth noting that the iPhone4’s screen is 640px wide, but the browser implements device-width=320, so that the mobile page optimized for 320 is not completely changed by the new phone’s increase in width.

Back to the original

There are three meanings behind the label:

Size 1.

My page is optimized for mobile devices and still works with a very small canvas (say 320px).

2. Zoom

I want my page to fill the entire screen in its initial state without manual scaling. Elements on the screen can be identified and used without manual scaling.

3. The response

In landscape, I want the canvas to zoom in, because my pages are responsive and have different representations in a larger canvas.

If your page doesn’t fit any of these three criteria, don’t use this tag, because inaccurate statements will only ruin your page’s performance in a mobile environment.


Hopefully there will be more pages with this classic tag that actually live up to its meaning.