CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
user
user

Reputation: 1001

Media query behavior with android devices

I am working in the phonegap/android. I had to use an image which was of size 304 * 250.

It is working perfectly in screen size of 320 * 480 and screen size of 720 * 1280.

Now When I wanted to check the same in a screen size of 240 * 320 and screen size of 480 * 800? Neither the background images were to be seen nor the data value.

Remedial step taken:

I thought of using a box shadow instead of the image. I implemented it and tested it in screen size of 320 * 480.It was perfect.

I thought of testing the same in the screen size of 240 * 320 and screen size of 480 * 800 using Media Query

I referred from here and I tried implementing it, But I was not successful. 

@media only screen and (max-width:320px) 
{ 
.container 
{ 
width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; 
} 
} 
@media only screen and (max-width:480px) 
{ 
.container 
{ 
width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px; 
} 
}

I have added this too 

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

My Problem

My device with 320*480 width-480 takes the 2nd CSS @media only screen and (max-width:480px), but my device with 240*320 width-320 too takes the 2nd CSS.

Upvotes: 0

Views: 386

Answers (1)

Mateusz Kocz
Mateusz Kocz

Reputation: 4602

Your 320px-width device actually uses both rules, but since the second one is later in your CSS, it overwrites the first one.

All of this happens because you basically say in your second rule, that all devices with width less than or equal to 480px should behave as you want them. Obviously 320px is also less than 480px so the rules apply to it.

As your second @media rule use @media only screen and (min-width: 321px) and (max-width:480px) { ... }. Now the devices with width smaller than 321px won't be affected by the second rule.

Upvotes: 1

Related Questions