Here is I have some question about responsive webdesign but this is bit different then standard media Query.
I need only one column in my layout while it is viewed in 1024px wide Galaxy Tab.
And I need 2 columns in my layout while it is viewed in 1024px wide computer/laptop screen.
Here my concern is physical computer screen size.
in Galaxy Tab it is 7" and in Computer screen it is about 14" for same resolution.
One way to distinguish between the two devices is as follows, based on the display (retina and non-retina):
@media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
[I]styles for Galaxy here[/I]
}
@media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
[I]styles for iPad here[/I]
}
Ultimately I’d say forget about devices, as there are too many to worry about. If people don’t like the size of their display then they can get a different device. Just make sure that your content is readable and decently laid out at the various screen sizes and let the device worry about how it renders things.
@media only screen and (max-width: 1024px) {
styles for NON_RETINA here
}
@media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
styles for RETINA OVERRIDES here
}
android , apple, and usesr of chrome, safari, the new opera, and, i think, DOLPHIN understand all if not most WEBKIT declarations… FF and MS users will always get the default rules… but I am not certain of how many regular mobile folks are using FF or IE; probably not a significant number.
Also… when desktop monitors go retina… i suppose all bets are off.