preface

The last chapter covered some of the basics of mobile Web development, so if you don’t remember, go back to my last article

Fundamentals of Mobile Web Development: Fundamentals of Mobile Development

An overview of the

Now let’s look at the viewport. The viewport is the area of the browser that displays the content of the page. You can think of it as the browser window.

Viewports can be divided into three types

  • Layout ViewPort
  • Visual ViewPort
  • Ideal Viewport

Let’s talk about the differences one by one

Layout ViewPort

Browsers on mobile devices have a default layout viewport, which is mainly used for early PC pages displayed on mobile browsers. Both iOS and Android devices basically have this viewport set to 980px, so most of the web on the PC side will be rendered on the phone, but the elements will look smaller than on the PC side. By default, web pages can be zoomed manually.

Visual ViewPort

It is the area of the site that the user is looking at, and the visual viewport can normally be manipulated by zooming, but the layout viewport will remain the same size.

Ideal Viewport

The ideal viewport refers to the ideal viewport size for a website to have the ideal browsing and reading width on the mobile terminal.

We need to manually add and notify the browser, via the TAB.

The main purpose of the label: ** The width of the layout viewport should match the width of the desired viewport. The most simple understanding is how wide the device is, how wide the layout viewport is.

Take a look at the specific tag Settings

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

Here’s what each attribute value means

  • Device-width = “device-width” width = “device width”
  • Initial-scale: indicates the initial scaling ratio, a number greater than 0. It is generally set to 1.0, which means no scaling
  • Maximum-scale: indicates the maximum scale ratio, a number greater than 0
  • Minimum-scale: the minimum scale ratio, a number greater than 0
  • User-scalable: Whether the user can scale, yes or no

The standard viewport parameter Settings follow the following:

  • The width of the viewport must be consistent with that of the device
  • The default viewport ratio is 1.0
  • The user is not allowed to zoom
  • Maximum zoom ratio 1.0
  • Minimum scale ratio 1.0

That’s all about viewports