Difference between aspect-ratio and device-aspect-ratio in CSS media queries

Question

What is the difference in simple terms between aspect-ratio and device-aspect-ratio?

Answer 1

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.