Media Queries & Device Type Detection Tests

Do you remember when you were so proud of your 100% responsive Web, and then you open it on ...oh shit... WTF IS THIS. So this is why I created this page, to test the media queries I was using at that time and try to understand why that old iPad was not rendering the site as expected on portrait orientation.

Investigation result: As you can se below, media queries are a lie where your 4k smartphone says it is a 360x640p 2010 smartphone. If you (as me) don't want to be part of this lie, there are libraries that detect the device type that is on the web (based on the user agent), for this site I'm using WURFL.js

Resolution:
Width: null
Height: null
 ...screen.width
...screen.height
Device type:
just a second...
 devicetype.js
Aplied Width:
Red: 320px
Blue: 481px
Green: 641px
Grey: 961px
Orange: 1025px
Pink: 1281px
Brown: 2049px
Yellow: 3841px 		@media (min-width:320px)
@media (min-width:481px)
@media (min-width:641px)
@media (min-width:961px)
@media (min-width:1025px)
@media (min-width:1281px)
@media (min-width:2049px)
@media (min-width:3841px)
Aplied orientation:
Red: Landscape
Blue: Portrait
 @media (orientation:landscape)
@media (orientation:portrait)