Layout breaks based on physical screen size?

HTML & CSS
1

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.

2

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]
}
3

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.

4

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.

5

actually you need to think RATIO not device.

so:

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