Viewport is the key factor for a web page to be compatible on both PC and mobile. In the reconstruction or development of web pages on mobile devices, the first thing to understand is the viewport on mobile devices. Only by understanding the concept of viewport and making clear the use of meta tags related to viewport can we better adapt our web pages to or respond to mobile devices of different resolutions.

The concept of viewPort

Viewport is the area of the device that displays the web page, and more specifically, the area of the browser (or maybe a WebView in an app) that displays the web page, but viewPort is alsoIs not limitedIn terms of the size of the browser’s viewable area, it may be larger than the browser’s viewable areabigOr maybe more than the viewable area of the browsersmall. By default, viewPorts on mobile devices are generally larger than the viewport area of the browser. This is because mobile devices have a smaller resolution than desktop computers, so in order to display traditional web sites designed for desktop browsers properly on mobile devices, All browsers on mobile devices have their default viewPort set to 980px or 1024px (or something else, depending on the device), but bring it inThe consequencesThe browser will scroll horizontally because the width of the browser’s viewport is smaller than the default viewPort width.

2. 1px in the CSS is not equal to 1px in the device

In CSS, we usually use PX as the unit. In desktop browser, a pixel of CSS usually corresponds to a physical pixel of the computer screen, which may cause the illusion that the pixel in CSS is the physical pixel of the device. The PIXELS in the CSS are not the same as the physical pixels. The pixels in the CSS are just abstract units. The 1PX in the CSS represents different physical pixels on different devices or in different environments. We don’t have to worry about this when designing a web page for a desktop browser, but on a mobile device, it’s important to understand. In earlier mobile devices, screen pixel density was low, such as the iphone3, which had a resolution of 320×480. On the iphone3, one CSS pixel was indeed equal to one physical pixel on the screen. Later, with the development of technology, the pixel density of the screen of mobile devices became higher and higher. Starting from iphone4, Apple introduced the so-called Retina screen, with the resolution doubled to 640×960, but the screen size remained unchanged, which meant that the pixels on the same size screen were doubled. At this time, One CSS pixel is equal to two physical pixels. The same goes for other brands of mobile devices. For example, Android devices can be divided into LDPI, MDPI, HDPI, XHDPI and other different levels according to the pixel density of the screen. The resolution is also varied. How many physical pixels of a CSS pixel on an Android device is equivalent to?

Another factor that can cause px changes in CSS is user scaling. For example, when a user doubles the size of a page, the number of physical pixels represented by 1px in the CSS doubles. Conversely, doubling the size of the page will reduce the number of physical pixels represented by 1px in the CSS by twice as much. More on this later in the article.

In mobile browsers and some desktop browsers, the Window object has a devicePixelRatio property, which is officially defined as the ratio of device physical pixels to device independent pixels, i.e., devicePixelRatio = physical pixels/individual pixels. The PX in the CSS can be regarded as an independent pixel of the device, so by using devicePixelRatio, we can know how many physical pixels a CSS pixel on the device represents. For example, on a Retina iPhone, devicePixelRatio is 2, meaning that one CSS pixel equals two physical pixels. Note, however, that devicePixelRatio has some compatibility issues across browsers, so we can’t trust it completely just yet.

Three, viewport’s three theories

First, browsers on mobile devices think they must be able to make all web sites display correctly, even those not designed for mobile devices. However, if you use the viewport area of the browser as the viewport, because the screen of mobile devices is not very wide, so those websites designed for desktop browser display on mobile devices will inevitably be crowded because of the mobile device viewport is too narrow, and even the layout will be messed up. Some may ask, aren’t there many phones with very large resolutions, such as 768×1024 or 1080×1920, that are fine for displaying websites designed for desktop browsers? As we’ve already said, 1px in CSS is not 1px on the screen, the bigger your resolution, the more physical pixels in CSS 1px is, and the bigger the devicePixelRatio is, which makes sense because you’re increasing the resolution, but the screen size isn’t that much bigger, The e 1px in CSS must represent more physical pixels so that 1px objects will be the same size on the screen as those on lower-resolution devices, or they will be too small to see. So on devices like 1080×1920, by default you might just have to set the width of a div to 300-plus pixels (depending on the devicePixelRatio) to get a full screen. To get back to the point, if the browser’s viewport area is set to viewPort on mobile devices, some websites will display a messy viewPort that is too narrow, so those browsers decide to default to a wider viewport, such as 980px. That way, even websites designed for the desktop will work on mobile browsers. The browser’s default viewport is called a Layout ViewPort. The layout of the viewport width can be through the document. The documentElement. ClientWidth to obtain.

However,layout viewportThe width of the viewport is larger than the viewport of the browser, so we also need a viewport to represent the viewport of the browser. PPK calls this viewportvisual viewport. The width of the Visual ViewPort can be obtained using window.innerWidth, but not in Android 2, Oprea Mini, or UC 8.

We now have two viewPorts: Layout ViewPort and Visual ViewPort. But browsers don’t think that’s enough, because more and more websites are individually designed for mobile devices and must have a viewport that works perfectly for mobile devices. Perfect fit means that, first of all, the user does not need to zoom and horizontal scrollbars to see all the content of the site; Second, the size of the text displayed is appropriate. For example, a 14px text will not be too small to be seen on a high-density screen. Ideally, this 14px text will be displayed in the same size regardless of the screen density and resolution. Of course, not just text, but other elements like images. Call this viewport ideal ViewPort, which is the third viewport — ideal viewport for mobile devices.

There is no fixed size for the Ideal ViewPort, different devices have different Ideal Viewports. The Ideal ViewPort for all iphones is 320px, whether the screen width is 320 or 640, that is, in the iPhone CSS 320px represents the width of the iPhone screen.

But android devices are more complicated, 320px, 360px, 384px, etc. For the ideal Viewport width of different devices, you can check it at viewportsizes.com, which collects the ideal width of many devices.

To sum up: Viewports on mobile devices are divided into layout ViewPort, Visual ViewPort and Ideal ViewPort. Ideal ViewPort is the most suitable viewport for mobile devices. The ideal ViewPort width is equal to the screen width of the mobile device. As long as you set the width of an element in CSS to the ideal Viewport width (in px), that element is the screen width of the device. The idea of the Ideal ViewPort is that sites designed for the Ideal ViewPort can be presented to the user at any screen resolution without manual scaling or horizontal scrollbars.

4. Use meta tags to control viewPort

The default viewPort for mobile devices is a Layout ViewPort, which is wider than the screen, but for mobile site development we need the Ideal ViewPort. So how do you get the Ideal ViewPort? This is where meta tags come in.

One of the most common things we do when developing websites for mobile devices is to copy the following into our head tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Copy the code

This meta tag makes the width of the current viewPort equal to the width of the device, and does not allow the user to manually scale. You may or may not allow the user to zoom in and out depending on the site, but having the viewPort width equal to the width of the device should be what everyone wants. If you don’t, you’ll use the default viewPort that is wider than the screen, which means a horizontal scroll bar will appear.

What does the meta tag named Viewport have and what does it do?

The Meta ViewPort tag was first introduced by Apple in its Safari browser to solve the viewport problem on mobile devices. Android and other browser vendors followed suit and introduced support for Meta ViewPort, which proved to be very useful.

In the Apple specification, the Meta ViewPort has six properties (let’s call those things in content individual properties and values for now), as follows:

  • Width: Sets the layout viewPort width to a positive integer or string “width-device”
  • Initial-scale: Sets the initial scale value of the page to a number, possibly with a decimal
  • Minimum-scale: The minimum scale allowed by the user. It can be a number with a decimal
  • Maximum-scale: indicates the maximum scale allowed by the user. It can be a number with a decimal
  • Height: Sets the height of the layout viewPort. This property is not important to us and is rarely used
  • User-scalable: Whether to allow users to scale. The value is “no” or “yes”, where “no” indicates “no” and “yes” indicates “yes”

These attributes can be used together, individually, or in combination, separated by commas.

In addition, android also supports target-densitydPI as a private property, which indicates the density level of the target device and determines how many physical pixels are represented by 1px in the CSS.

  • Target-densitydpi: the value can be a value or one of the following characters: high-dPI, medium-dpi, low-dpi, and device-dpi

In particular, when target-denSitydpi =device-dpi, 1px in CSS is equal to 1px in physical pixels.

Since this property is only supported by Android, and Android has decided to deprecate target-densitydpi, we should avoid using this property.

5. Set the viewPort width to the ideal ViewPort width

To get the Ideal ViewPort, you must set the default Layout ViewPort width to the screen width of your mobile device. Since width in the Meta ViewPort controls the width of the Layout ViewPort, we only need to set width to the special value width-device.

<meta name="viewport" content="width=device-width">
Copy the code



You can see that by width=device-width, all browsers can change the current viewPort width to the ideal Viewport width, but it’s important to note that on iPhone and iPad, whether it’s portrait or landscape, The width is the width of the Ideal ViewPort in portrait.

Sure, when we’re developing web pages for mobile devices, whether you know what a viewport is or not, this is probably all you need.

With this setup, the same result can be achieved

<meta name="viewport" content="initial-scale=1">
Copy the code

This code can also achieve the same effect as the previous one, and can also change the current viewport to the Ideal Viewport.

Because in theory, all this code does is not scale the current page, i.e. the page should be as big as it should be. Width =device-width?

And to figure that out, first you have to figure out what the scaling is relative to, because the scaling here is 1, which means it’s not scaled, but it achieves the Ideal Viewport, so there’s only one answer, the scaling is relative to the Ideal Viewport, When you scale the Ideal ViewPort 100%, that’s 1, you get the Ideal ViewPort. As it turns out, it is. Below is the test result of whether the browser on all mobile devices can change the viewPort width to the Ideal ViewPort width when set.

Test results show that initial-scale=1 also changes the viewPort width to the ideal ViewPort width, But this time it’s Internet Explorer on Windows Phone that sets the width of the Ideal ViewPort for portrait and landscape. But that little flaw doesn’t matter anymore.

But what if width and initial-scale=1 are both present and there is a conflict? Such as:

<meta name="viewport" content="width=400, initial-scale=1">
Copy the code

Width =400 sets the current viewport width to 400px and initial-scale=1 sets the current viewport width to the ideal Viewport width. Is it the one that’s written on the back? It isn’t. When this happens, the browser takes the larger of the two. For example, when width=400 and ideal ViewPort width is 320, select 400; When width=400 and the ideal Viewport width is 480, the ideal Viewport width is taken. In UC9, when initial-scale=1, the width of the viewPort will always be the width of the ideal Viewport regardless of the width property value.

And finally, to summarize, to set the current viewport width to the ideal Viewport width, you can either set width=device-width or initial-scale=1, but there’s a small flaw in both, The ideal ViewPort width is the same for iPhone, iPad and Internet Explorer. Initial-scale =1; width=device-width =1; width=device-width =1;

<meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code

Six, the concluding

First of all, if you don’t set the Meta ViewPort tag, the default browser width on mobile devices is 800px, 980px, 1024px, etc., which is larger than the screen width. The width unit px is the CSS px, which is not the same as the actual pixels on the screen.

Second, every mobile device browser has an ideal width. This ideal width refers to the CSS width, regardless of the physical width of the device. In CSS, this width is equal to 100% of the width represented. We can use the meta tag to set the viewport width to the desired width. If we don’t know what the desired width of the device is, we can use the device-width special value. And initial-scale=1 also sets the viewport width to the desired width. So, we can use

<meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code

To get an ideal viewPort.

Why do you need an ideal viewport? For example, the ideal viewport width for a 320×480 phone is 320px, and the ideal viewport width for a 640×960 phone with the same screen size is 320px. So why should the ideal width of the high resolution phone be the same as the ideal width of the low resolution phone? That’s because it’s the only way to ensure that the same site looks the same or similar on different resolutions. In fact, although there are so many mobile phones of different types and brands with different resolutions in the market, their ideal viewport widths can be summed up as no more than 320, 360, 384, 400, etc., which are very similar. A similar ideal width means that a site designed for one device’s ideal viewport will not behave very differently or even the same on other devices.