CODEWITHSUNDEEP
cssresponsive-design
Iván Pallarés
Iván Pallarés

Reputation: 145

Responsive design mess

Right when I thought I had it all understood and organized about media queries and responsive design I have started to see some weird behavior in some devices which makes a mess of it.

My intention is to have a set of media queries with which I can have all different devices/resolutions covered. I have seen some articles with examples and started to put them into practice but when testing in a Samsung Galaxy SII mobile they don't seem to work as expected.

To begin width SII is claimed to have a resolution of 480x800. I don't know whether this resolution is for video playing only but when I prepare my designs they seem to fit to 320px width.

I am using javascript screen.width and screen.height properties to check what resolution it is working with and here are my results:

Actually, real resolution in all these cases seems to be 320x533.

Anyone has an explanation for this weird behavior?

Any advice to approach it and get the set of media queries to cover all resolutions??

EDIT::::::::::::::

I have tried with viewport:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

and still no success. Actually according to the article in the link given by hexblot "maximum-scale=1" should not aoiv zooming but it does in my device (it may just be for iOS, don't know). I have following css links:

<link rel='stylesheet' type='text/css' media='only screen and (max-width : 320px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xsmall.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 321px) and (max-width : 479px)' href='".home_url()."/wp-content/themes/twentyeleven/style-small.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 481px) and (max-width : 767px)' href='".home_url()."/wp-content/themes/twentyeleven/style-medium.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 768px) and (max-width : 959px)' href='".home_url()."/wp-content/themes/twentyeleven/style-large.css'>
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 960px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xlarge.css'>

When visiting the site in my device I can check it is using style-xsmall.css (up to 320px width).

Honestly, it looks like its real width is 320px (at least for web browsing) when in portrait orientation and 533px (weird size) when in landscape.

Any clue?

Upvotes: 0

Views: 461

Answers (2)

Iv&#225;n Pallar&#233;s
Iv&#225;n Pallar&#233;s

Reputation: 145

Apparently this happens because of the pixel density, which in this device is 1.5 (480 becomes 320 and 800 becomes 533). The same appears to happen with some iOS devices using pixel density=2 which divides the real density by 2.

I have gotten this info from this link: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml . Hope it is helpful for somebody else.

Thus it seems that, when using javascript screen properties, firefox retrieves the device width/height whereas the native android browser gets the 'converted' sizes.

I still don't understand why, in native browser, different resolutions are shown deppendind on the device orientation.

And finally, doing some quick tests (unfortunatelly I don't have enough time to get to deep conclusions), it seems that both max-device-width and max-width work with coverted sizes (320x533).

Still, considering it all is a little bit of a mess (at least for me) it would be good if anybody else can give some relevant info on how to deal with all this features.

Upvotes: 0

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

have you set the viewport via relevant meta tags ? otherwise the screen may be scaled automatically in most mobile devices. Checkout http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Upvotes: 2

Related Questions