Summary of background

Some time ago, I made a demotion guide for Canvas rendering ➡️ Phaser3 Rendering Philosophy, but unfortunately, the product used to only run on PC and Pad has been adapted to mobile, so I encountered the following problems:

You can see from the picture that the picture is getting blurred, so what’s the problem?

Back to last time we rendered the logical resolution at 1:1, which theoretically fits most electronic screens, but some devices have a higher physical resolution than the logical resolution, with PPI of 2-3.

At this point, there are actually several pixels in the unit space, but we only render one, so there is a problem.

Concept of popular science

Above, we have introduced three concepts, logical resolution, physical resolution and PPI. The following are their basic concepts:

  • Logical resolution: software can achieve
  • Physical resolution: what the hardware supports
  • PPI: Number of pixels per inch that can be displayed on the screen (Pixel Per Inch)

What to make of the above concepts?

Now you have a PC with a screen size of 24 inches and a resolution of 1920×1080. This is the physical resolution of the hardware. At this time, a software developer develops a software that fixes the pixels to render at 1920 pixels horizontally and 1080 pixels vertically, so that it just covers the entire screen.

Customers are happy to use it.

However, excellent display developers to upgrade hardware, under the condition of same 24-inch, respectively, the horizontal longitudinal pixels increased to the original two times, lateral resolution increased to 3840, the longitudinal resolution is increased to 2160, the other hand, is originally a unit of space position only render 1 pixel, but the rendering four pixels.

Users are happy to buy back the new monitor, open the software to see, how can not spread the entire screen?

Oh, it turns out that the software was designed to render in fixed pixels, but now with more pixels, it only renders the part of itself that should be rendered.

At this point, the smart system developer stepped in and said, “Let’s set up something called logical resolution that tells the software running on the system how many times the number of pixels to render. “

So the software developer liked it, took this step, and the software can be used in full screen on the new 3840×2160.

The Retina screen

With the introduction of the iPhone4, PPI of the Retina display was already invisible to the naked eye, which technically meant that Apple had crammed twice as many pixels into a screen with the same physical size as the previous one (compared to the previous iPhone3GS).

The iPhone 4 has a Retina display that doubles the number of pixels to 640×960 while remaining the same physical size. The iPhone 3GS has 320 x 480 = 153,600 pixels, while the iPhone 4 has 640 x 960 = 614,400 pixels, which is four times the number of pixels.

Apple is such processing: choice under the condition of the aspect ratio is constant, directly to the resolution of 4 times, 1 pixel position will ever use four pixel rendering, at the same time the system promotion to developers, because they only need to apply before the zoom in 4 times, so late application adapter is very fast.

With the Retina screen, the above concept can be understood better.

The emergence of polyploids

If you’re lucky enough to be in contact with the company UI ladies, you’ll find that the UI manuscript url they provide has multiple options for downloading cutscenes (on iOS, for example) :

#One additional note, iOS multigraph rules:
#Up to 3GS it's @1x;
#Iphone4-8 (not including Plus), iPhoneXR iPhone11, iPad @2x;
#IPhone6Plus -- iPhone8Plus, iPhoneX, XS, XS Max, 11 Pro, 11 Pro Max, 12 all series @3x
Copy the code

What is a multiplogram? According to the above description and development specification, to render images properly on upgraded hardware devices, you need to find the corresponding version cut diagram.

One-fold diagram: When this ratio is 1:1, display 1 CSS pixel with 1 device pixel.

Double diagram: When the ratio is 2:1, using 4 device pixels to display 1 CSS pixel,

Triples: When the ratio is 3:1, display 1 CSS pixel using 9 (3 x 3) device pixels

How do you find out which version of the image to use? Please read on.

How does H5 know the device scaling ratio

Front-end equipment zoom ratio:

// Use devicePixelRatio directly under the window object
window.devicePixelRatio
Copy the code

The devicePixelRatio of the Window interface returns the ratio of the physical pixel resolution of the current display device to the CSS pixel resolution. This value can also be interpreted as a ratio of pixel sizes: the size of a CSS pixel versus the size of a physical pixel. In simple terms, it tells the browser how many actual screen pixels should be used to draw a single CSS pixel.

So when rendering Canvas on the corresponding device, just multiply the resolution by the device scaling ratio.

This is useful when dealing with the difference between a standard display and a HiDPI or Retina display, which uses more screen pixels to draw the same object, resulting ina sharper image.

There are different results when printing on different devices:

24 “1980×1080 screenDevicePixelRatio: 1.:

15 inch physical resolution 2880×1880, actual render logical resolution 1920×1220DevicePixelRatio: 2:

IPhone12 physical resolution 2532×1170DevicePixelRatio: 3:

IPad Pro 11-inch physical resolution 2388×1668DevicePixelRatio: 2:

PPI in Life

SQRT {(Width^2+Height^2)} /Inch (Width2+Height2)/Inch

Taking iPhone12 as an example, the introduction on the official website is as follows:

The calculated result is 460.272526815668487, which conforms to the theoretical value on the official website.

conclusion

The basic concepts of physical resolution, logical resolution, PPI, Retina screen and so on have been introduced above. In combination with the basic concepts, the following shows how to distinguish device scaling ratio and the considerations of front-end development for Canvas rendering, hoping to help you.