What is the difference in simple terms between aspect-ratio
and device-aspect-ratio
?
5 Answers
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.
-
This should be the accepted answer since the other just repeats the definitions that were the cause of the initial confusion. Jun 6, 2016 at 11:25
-
@PeterHansen How do you know that documentation in the accepted answer was the source of confusion for the OP?– alexJun 6, 2016 at 13:32
-
4@alex, good point, I don't. I know it was the source of my confusion (and, clearly, many others, given this answer's vote total). I also think anyone can easily find the definition and read it, so if they had to ask here I assume it was because of that same "target display area" thing. I retract my implication that everyone's initial confusion stems from the same thing. Jun 6, 2016 at 16:35
A functional difference on mobile is that having the soft keyboard come up changes aspect-ratio but does not change device-aspect-ratio.
aspect-ratio
Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the number of horizontal pixels over the number of vertical pixels.
device-aspect-ratio
Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the number of horizontal pixels over the number of vertical pixels.
aspect-ratio measures viewport area. device-aspect-ratio measures device screen area.
ASPECT RATIO
The viewport aspect ratio or device aspect ratio is the ratio of the width to the height. So, if a screen were 1,000 pixels wide and 500 pixels high, the device-aspect-ratio would be 2:1, because 1,000 is twice 500. The ratios of screens vary widely, even though at first glance they pretty much all just look like a similar rectangle.
Common monitor aspect ratios are 16:9 (such as 1920 × 1080 or 1366 × 768 pixels) or 16:10 (1280 × 800). The iPhone 3 and 4S are 3:2 (480 × 320 and 960 × 640) and the iPhone 5 is 16:9 (1136 × 640). Android phones are commonly 4:3, 3:2, 16:10, or 16:9.
Examples:
@media only screen and (device-aspect-ratio: 16/9)
{ ... }
@media only screen and (min-device-aspect-ratio:
1920/1080) { ... }
-
1This doesn't attempt to explain the difference between the two terms mentioned in the question. Mar 30, 2015 at 17:46