Shulou(Shulou.com)06/01 Report--

The main purpose of understanding the knowledge of mobile web viewport is to have a clear idea when you cut the picture. This paper mainly focuses on a question: how to set the relevant parameters when cutting the picture? Viewport will be explained around this issue.

1. The concept of viewport [viewport here is layout viewport]

The viewport of a mobile device is an area on the device screen that can display a web page.

The area in which the web page is displayed may be larger or smaller than the browser visual area, and can also be set when you cut the image. By default, the viewport of the mobile device is larger than the visual area of the mobile device browser, mainly to be able to display the PC-side page on the mobile device.

Mobile device browsers will have a default view value that may be 980px1024px or other, depending on the device.

Mobile browsers do two things by default to display pc pages: first, render the page in 980px's layout viewport, and then display it on the phone screen by zooming in, so that users can see the full picture of the page.

But when we move the end-cut image, we will not use this default 980px for layout, mainly because

* the width is not controllable, and the default viewport of different systems and devices may be different.

* the reduced version of the page is explicit and the interaction is not friendly.

* links cannot be clicked

* there is zooming and scrolling after zooming, so the interaction is not friendly.

And user zooming will cause the corresponding relationship between px and dp to change. If the page is doubled in size, the physical pixel represented by 1px in css will be doubled, the page will be doubled in size, and the physical pixel represented by 1px in css will be doubled.

So it is very irregular to use the default 980px layout, so what can we do to cut the picture in order to make the layout correct? We will use the label, step by step below.

II. Layout viewport and visual viewport

1 、 layout viewport

The default viewport of the browser is called layout viewport, and this layour viewport can be obtained through document.documentElement.clientWidth. (important for front-end cut)

2 、 visual viewport

The width of the layout viewport is larger than the width of the browser's visual area, and a viewport is required to represent the size of the browser's visual area (not very important for the front-end cut). This viewport is called visual viewport.

The width of the visual viewport can be obtained through window.innerWidth.

3 、 ideal viewport

Visual viewport represents the width of the visual area of the mobile device browser. In order to display the large page on the PC side, layout view needs a viewport that can perfectly adapt to the mobile device because the mobile terminal is developing so fast. This perfectly matched viewport allows users to view all the content of the site without zooming or horizontal scrollbars. This ideal viewport is the ideal viewport for mobile devices.

The width of the ideal viewport is equal to the screen width of the mobile device.

Third, use meta tags to control viewport.

The default viewport on the mobile is layout viewport, that is, the viewport that is wider than the screen, and you need to change the default layout viewport to ideal viewport when you cut the image. This is the role of tags in mobile development.

This section of meta resets the width of the layout viewport to the width of the device, so that we can cut the image in ideal viewport instead of using the default layout viewport.

The meta viewport tag was first introduced by Apple in its safari browser to solve the viewport problem on mobile devices. Later, Android and major browser makers followed suit and introduced support for meta viewport, which proved to be very useful.

In Apple's specification, meta viewport has six attributes (let's call those in content attributes and values), as follows:

Width sets the width of the layout viewport to a positive integer, or the string "width-device" initial-scale sets the initial scaling value of the page to a number, can take the decimal minimum-scale to allow the user's minimum scaling value, to a number, can take the decimal maximum-scale to allow the user's maximum scaling value, to a number, can take the decimal height to set the height of the layout viewport, this property is not important to us. Rarely use user-scalable to allow users to zoom. The value is "no" or "yes". No means not allowed, yes means allowed.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.