Layout breaks based on physical screen size?

Hello friends,

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.

Kindly advise.

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]

Yes I agree with your idea about retina and non-retina.

but there are many other Tablet which have same -webkit-min-device-pixel-ratio as it with desktop. only Apple device is getting it different.

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.

actually you need to think RATIO not device.


@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.