Recently, I rethought the problem of mobile terminal adaptation. I remembered the Ali-HD solution Lib-Flexible that I had used before, only to find that the official said that “this transition scheme can be abandoned”. Amefe-flexible is now used, some ideas and introduction about this scheme can be seen using flexible to achieve the terminal adaptation of hand Amoy H5 page.

Well, after all, I have done the development of mobile terminal for a period of time. I have been ignorant about the adaptation of mobile terminal and the understanding of viewport. After you’ve worked hard at Google, take a serious note and summarize.

viewport

Viewport is the area of the browser where a web page is displayed. On a PC, the viewport width is the same as the browser width; The mobile viewport has Layout ViewPort, Visual ViewPort and Ideal ViewPort.

Mobile screens are so small that what the naked eye can see is extremely limited. On mobile devices, browsers usually set viewport to 980px/1024px by default, but there are other values depending on the vendor. This default viewport (layout viewport, below) is much larger than the screen to allow mobile devices to display web sites that are traditionally designed for PCS, which, obviously, leads to the inevitable problem of horizontal scrollbars. The only way to see it all at once is to shrink the page, which is likely to make it even harder to see.

Layout viewport

  • A fixed area for storing web pages
  • IPhone 980px/1024px, Android manufacturers are inconsistent
  • Measurement method:document.documentElement.clientWidth/Height(Scroll bar not included)
  • <html>The width of the element is inherited from the Layout Viewport

Visual ViewPort

  • The visible area of the current window
  • The default is the width of the screen, which can be changed by swiping or zooming. Once the user zooms out, more CSS pixels are displayed on the screen and the viewport becomes larger, whereas when zooming in, the viewport becomes smaller. (Note that the layout viewport does not change.)
  • Measurement method:window.innerWidth/Height(Scroll bar included)

Here’s a metaphor to illustrate it, a quote:

For example: using a magnifying glass to look at an image, the width of the image is the layout viewport, immutable. A magnifying glass corresponds to a viewing port. We can change the viewport by moving the magnifying glass or adjusting the distance to see different contents of the layout viewport

Ideal viewport

  • The ideal viewport for mobile devices, one that allows you to view all the content of your site without having to scale or scroll horizontally.
  • Width is equal to the width of the mobile device screen
  • Measurement method:screen.width/height(The device-width/height of the meta tag is determined using screen.width/height)

Meta tags

The mata tag allows you to define the width of the window. A typical use:

<meta name="viewport" content="width=device-width,initial =1.0, maximum-scale=1.0, User-Scalable =0"> <meta name="viewport" content="width=device-width,initial =1.0, maximum-scale=1.0, User-Scalable =0">Copy the code
  • width=device-widthMake the window width (layout viewport) is equal to the screen width of the device, i.eideal viewport(It can also be seen that,device-width/heightIs the use ofscreen.width/heightAs a decision value)
  • Initial - scale = 1.0Set the initial zoom value of the pagewidth=device-widthThe Settings are the same.Width of Visual ViewPort = Width of Ideal Viewport/zoom value
  • Maximum - scale = 1.0Maximum user zoom value
  • user-scalable=0– Users are not allowed to zoom (setting this to no may result in visually impaired users not being able to zoom)

In addition, sometimes we may set viewport-fit, which is a property created for the iphoneX to restrict how web pages are displayed in the security zone. For details about the security zone adaptation, see web pages for the iphoneX. It’s as simple as that, right

— Q & A —

Initial -scale=1.0; initial-scale=1.0; initial-scale=1.0;

A: Scaling is relative, that is, it makes sense to consider what scaling is relative to. From the back, it scales relative to the Deal viewport, since both have the same effect.

Q: In addition, if both width and initial-scale are set, which value can be set?

A: The browser takes the larger of the two values

Usually, the two are written together, because the iPhone, iPad, and IE don’t display either side or portrait. To put it bluntly, it is to solve compatibility problems

Set meta Viewport versus not set meta Viewport

Set meta width=device-width (right) and meta width=device-width (left).

  • The image on the left looks smaller. When meta is not set, the screen is divided into 980 pieces by default. The box visually has a ratio of 200px to 980px (I actually printed 981 through window.innerWidth, for unknown reasons).
  • The image on the right divides the screen into 375 pieces, so the box ratio is 200px/375px (window.innerWidth prints 375).

After setting the initial scale in the right image above to 2:

The default scale value for initial-scale

For example, open the official website of Taobao, and you can see the display effect of F12 on iPhone, and you can see a smaller version of the official website. At this time, there is no horizontal scroll bar, and the whole page is scaled:

Initial-scale = ideal viewport/Visual Viewport = 375px / 980px

On the iPhone and iPad, no matter how wide you set the viewport, if you don’t specify a default zoom value, the iPhone and iPad automatically calculate the zoom value so that the current page doesn’t scroll horizontally (or the width of the viewport is the width of the screen).

Three pixels

For those who know something about mobile, CSS is 1px! == 1px of the device, why?

1. Physical Pixel

  • Also called device pixel, unit PT
  • Resolution is the number of physical pixels in the horizontal and vertical directions of a device’s screen
  • PPI (Pixel per inch), the number of physical pixels per inch. The higher the PPI, the better the picture.

Before the concept of retina screen, there was no difference between device pixels and device independent pixels. The two are the same. With the advent of retina and higher PPI screens, there are more pixels on the screen, and 1px CSS pixel is no longer simply equivalent to one physical pixel.

2. Dip, density independent pixel, device-independent Pixel

Also known as density-independent pixel, logical pixel, is a virtual pixel (such as CSS pixel) used by the program, and then converted into a physical pixel by the relevant system.

3. CSS Pixel

Also known as a virtual pixel, it is an abstract unit used by browsers to measure the content of web pages and is the logical pixel used by CSS styles. How 1px is displayed depends on the device, it is a relative unit!

CSS pixel = Device independent pixel = Virtual/logical pixel

What is the relationship between device pixels and device independent pixels?

DPR (Device Pixel Ratio)

Window. devicePixelRatio, ratio of physical pixels to device-independent pixels Window. devicePixelRatio = Physical pixels/dip

For non-retina screen, DPR = 320/320 = 1 on iPhone 3, for retina screen, for iPhone 4S, DPR = 640/320 = 2

For example, on a device with a DPR of 2, there are 4 physical pixels (2 x 2) for every 1px CSS pixel.

Relevant concepts

Pixel density (PPI)

The number of pixels per inch length, also called the number of pixels

DPI (dots per inch)

The number of points per inch

Relevant properties

Screen. width The value of this property varies among devices

  • IOS Retina Screen: Returns the width of a single pixel of the device
  • Partial Android, returns the width of the physical pixel

PageX /Y, clientX/Y, screenX/Y (event)

  • PageX /Y: CSS pixels from the HTML origin to the event trigger point
  • ClientX /Y: CSS pixels between the browser window origin and the event origin
  • ScreenX /pageY: CSS pixels between the origin of the user display window and the origin of the event

The above introduction is some basic theoretical knowledge, which will be sorted out and recorded here, and will be further supplemented and improved in the future. There’s a lot of knowledge and a lot of detail, including different devices, landscape and portrait performance, and so on. All for the mobile terminal page adaptive scheme, so that the page is comfortable to restore the appearance of the design draft, and in different devices have the same or similar display.

Refer to the link

  • Use Flexible to realize terminal adaptation of H5 page
  • A Tale of Two Viewports — Part Two: A Tale of Two Viewports — Part Two
  • Deep understanding of viewport for mobile front-end development
  • Web viewport
  • Viewport for mobile Web development