Menu
What is the difference in simple terms between aspect-ratio and device-aspect-ratio?
634
The aspect ratio of a display device is the proportional relationship between the width and the height of the display. It is expressed as two numbers separated by a colon (x:y), where x corresponds to the width and y to the height. Common aspect ratios for displays, past and present, include 5:4, 4:3, 16:10 and 16:9.
The aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport. It is a range feature, meaning you can also use the prefixed min-aspect-ratio and max-aspect-ratio variants to query minimum and maximum values, respectively.
The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio.
For everyone who is confused about the difference between targeted display area and output device regarding the aspect-ratio:
targeted display area
Aspect ratio of your browser window or the area your website is displayed on (a special case would for example be an embedded website)
output device
Physical aspect ratio of the screen. E.g. of your smartphone or desktop display
As smartphones and tablets usually display apps in fullscreen mode only, aspect-ratio and device-aspect-ratio are the same. On a desktop computer this surely is not always the case as the user can resize the browser window and thus the aspect-ratio changes.
I hope it helps.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
