Understanding screen sizes
On website I saw next picture:
How to understand for example screen size 390 x 844 on IPhone 12, while IPhone 12 screen resolution is 2532 x 1170, why here is it 390 x 844?
Website - mobile-screen-sizes
In order for a web page to be readable on a smartphone, an adaptive setting for the visible area (Viewport) was invented. For example, the iPhone 12 has a resolution of 1170 x 2532 and a pixel density of 460 ppi. If a website is displayed in such a resolution, the text on the smartphone screen will simply be too small to read due to the low pixel value relative to the smartphone screen. Because of this, the smartphone screen resolution is artificially reduced, and the website is displayed as if it were on a smartphone with a lower screen resolution.
The formula to calculate how much the display will be reduced is as follows:
If the screen has a pixel density of less than 200 ppi, the resolution will be equal to the physical resolution. If the screen has a pixel density of 200 ppi to 300 ppi, the new resolution will be 1.5 times less than the physical resolution. And if the screen has a pixel density of more than 300 ppi, the new resolution will be determined by dividing the physical resolution by a certain coefficient. This coefficient is determined by the formula - Pixel Density / 150 ppi, usually rounded to 2, 2.5, 3, 3.5, 4, etc.
For example:
iPhone 12 - actual resolution 1170 x 2532 px, pixel density 460 ppi. We can see that the pixel density per inch of the iPhone 12 (460 ppi) is greater than 300 ppi, so we calculate the coefficient manually: 460 ppi / 150 ppi = 3 (rounded to 3). Now, using this coefficient, we calculate the artificial resolution of the iPhone 12, or in other words, the resolution of our viewport: 1170 px / 3 = 390 px, 2532 / 3 = 844 px. Now, effectively, with a resolution of 1170 x 2532 px, a web page will be displayed as if the smartphone's resolution were 390 x 844 px.
The next image demonstrates the same concept, but for the iPhone 4:
The information and materials are taken from the website - https://itchief.ru/html-and-css/viewport-meta-tag.
- How to record high quality videos with Windows Media Encoder in C#
- How to receive handle of second Monitor / Desktop
- SWIFTUI How to capture VStack height with geometry (after the VStack was displayed)?
- Gesture detector stops working when I drag object off scree (infinite canvas)
- Is there any way to detect a screen capture or recording?
- How do you take a full webpage screenshot on a Windows computer?
- How can I get the screen resolution in R
- Delphi Console XE7 Clearscreen
- Adding a footer that is always displayed at bottom of screen?
- How to find what density bucket the phone is in?
- Simple C# Screen sharing application
- ImportError: libcuda.so.1: cannot open shared object file
- Flutter rotate the screen
- Wordpress dreaded white screen while creating or updating a post
- How to make a window fullscreen in a secondary display with tkinter?
- How to record iPhone screen during app testing in Xcode?
- Kivy App with API Call: Loading Screen Transition and Error
- How to horizontal flip my android screen, in order to see it like if i am watching it on a mirror?
- How to prevent JFrame from being oversized for window when calling pack()?
- Visual Studio Code IDE splitting screen in same file (not wanted)
- How correct save information in file python
- How can I get screen resolution in java?
- Why can't keyctl read my keys under tmux or screen sometimes, error: keyctl_read_alloc: Permission denied
- How to refer on object
- Turn screen on and off on Windows
- How do I get monitor resolution in Python?
- How can I have shared borders on Bootstrap columns?
- Is there a good open codec for screencast compression
- Android: how to convert whole ImageView to Bitmap?
- How to make JavaFX tell if I'm on a 4k or 1080p screen