I am developing my own responsive framework, and here is the notes and research.
Device resolutions:
Samsung Galaxy S 4inch:
Samsung Galaxy Tab 7inch:
IPad 9inch: QXGA 2048 X 1536 4:3 aspect ratio
Surface pro: hd720 1280 X 720 16:9 aspect ratio
PC’s at work:
WSXGA+ 1680 X 1050 16:10 aspect ratio
SXGA 1280 X 1024 5:4 aspect ratio
Available media query syntax
There are some exciting ways to access these. There are the standard height and width, combined with max or min,
@media all and (min-width:1280px)
but there is an exciting aspect ratio query to allow me to use the extra space at the bottom of the 16:10 sxga and wsxga+ resolution displays
@media screen and (device-aspect-ratio: 5/4), screen and (device-aspect-ratio: 16/10) { ... } Well this blows, I have spent two hours on this shit and I cant get the fucking max-height or min-height to work at all, and that is the whole reason that I need this query, to fill in the fucking space left on the bigger screens.the aspect ratio thing is ok, but its not firing correctly, and still applies the styles to the wrong places. Maybe with some adjustment, like put it at the top of the pile of queries.
Here are the docs. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries