[ACCEPTED]-Difference between aspect-ratio and device-aspect-ratio in CSS media queries-media-queries
For everyone who is confused about the difference 12 between targeted display area and output device regarding the aspect-ratio:
targeted display area
Aspect 11 ratio of your browser window or the area 10 your website is displayed on (a special 9 case would for example be an embedded website)
output device
Physical 8 aspect ratio of the screen. E.g. of your 7 smartphone or desktop display
As smartphones 6 and tablets usually display apps in fullscreen 5 mode only, aspect-ratio and device-aspect-ratio are the same. On a desktop 4 computer this surely is not always the case 3 as the user can resize the browser window 2 and thus the aspect-ratio changes.
I hope 1 it helps.
A functional difference on mobile is that 2 having the soft keyboard come up changes 1 aspect-ratio but does not change device-aspect-ratio.
aspect-ratio
Describes the aspect ratio of the targeted 10 display area of the output device. This 9 value consists of two positive integers 8 separated by a slash ("/") character. This 7 represents the number of horizontal pixels 6 over the number of vertical pixels.
device-aspect-ratio
Describes 5 the aspect ratio of the output device. This 4 value consists of two positive integers 3 separated by a slash ("/") character. This 2 represents the number of horizontal pixels 1 over the number of vertical pixels.
aspect-ratio measures viewport area. device-aspect-ratio 1 measures device screen area.
ASPECT RATIO
The viewport aspect ratio or device aspect 13 ratio is the ratio of the width to the height. So, if 12 a screen were 1,000 pixels wide and 500 11 pixels high, the device-aspect-ratio would 10 be 2:1, because 1,000 is twice 500. The 9 ratios of screens vary widely, even though 8 at first glance they pretty much all just 7 look like a similar rectangle.
Common monitor 6 aspect ratios are 16:9 (such as 1920 × 1080 5 or 1366 × 768 pixels) or 16:10 (1280 × 800). The 4 iPhone 3 and 4S are 3:2 (480 × 320 and 960 3 × 640) and the iPhone 5 is 16:9 (1136 × 640). Android 2 phones are commonly 4:3, 3:2, 16:10, or 1 16:9.
Examples:
@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.