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

css media-queries
poptag picture poptag · Apr 20, 2011 · Viewed 29.7k times · Source

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

Answer

F Lekschas picture F Lekschas · Sep 5, 2013

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.

Related questions

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS: @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @…

Read More
Media Queries: How to target desktop, tablet, and mobile?

I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes. I want to be able to target desktop, tablet and mobile. I know that there will be some …

Read More
Twitter Bootstrap 3: how to use media queries?

I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size. How can I use media queries to make this kind of logic?

Read More