Develop Reference

How to add CSS code to make responsive for different screen sizes?

I have android program that use view web server local HTML. But HTML don't work well in android device emulator. I use these CSS codes but it doesn't work.
#media screen and (-webkit-device-pixel-ratio: 1.5) {}
#media screen and (-webkit-device-pixel-ratio: 0.75) {}
And these below CSS codes, it work for browsers but it doesn't work well for android emulator.
#media screen and (min-width:960px) and (max-width:1200px){}
#media screen and (min-width:720px) and (max-width:959px) {}
#media screen and (min-width:640px) and (max-width:719px) {}
#media screen and (min-width:480px) and (max-width:639px) {}
#media screen and (min-width:320px) and (max-width:479px) {}
Could someone tell me the CSS codes that work for phones and tablet, landscape and portrait. Thanks for answer...

I'm not entirely sure I understand your problem, however if you're having the problem I think you are: try this:
<meta name="viewport" content="width=device-width" />

Your second version should work seamlessly:
#media screen and (min-width:960px) and (max-width:1200px){}
#media screen and (min-width:720px) and (max-width:959px) {}
#media screen and (min-width:640px) and (max-width:719px) {}
#media screen and (min-width:480px) and (max-width:639px) {}
#media screen and (min-width:320px) and (max-width:479px) {}
Because the first version relies on device pixel ratio not upon the actual screen sizes. Did you insert the viewport meta tag in the head?

Try Adding this in head section.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and in css file write media query as follows.
#media only screen and (min-width: 600px){
}

#media screen not rendering for mobile

I'm using the media screen query in my css but the problem is that it's not rendering for mobile. It renders for computer screen sizes but when it comes to mobile devices it doesn't work.
Here is my css
.featured-post-image{
position:absolute;
left:0;
right:0;
width:100% !important;
height:100%;
max-height:700px !important;
}
.wrap{
position:relative;
padding-top:37em;
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
.wrap{
padding-top: 5em !important;
}
}
With this in my header
<meta name="viewport" content="width=device-width, initial-scale=1">
What I am trying to do is change the padding on .wrap and it's not working. Can anyone tell me why it's not working?

#media (min-width: 320px) and (max-width: 480px){
.wrap { padding-top: 5em !important; }
}
You forgot the curly braces in #media.

For Mobile Responsive you have add these things :
In Header :
// Browser rendering properly
<meta charset="utf-8">
// Select device view port width
<meta name="viewport" content="width=device-width, initial-scale=1">
// for device touch gesture
<meta name="HandheldFriendly" content="true"/>
In CSS :
#media screen and (min-width:992px) and (max-width:1200px){
// css goes here
}
#media screen and (min-width:768px) and (max-width:991px){
// css goes here
}
#media screen and (max-width:767px){
// css goes here
}

How to use media queries in phonegap

I am developing an app using phonegap.I had already made my app which is compatible with 320 x 480 resolution screen.Now I am using media queries to make it compatible with 480 x 800 screen as well as higher resolutions as follows
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style1 -->
<link rel="stylesheet" media="only screen and (min-width: 200px) and (max-width: 320px) and (orientation: portrait)" href="style.css">
<!-- style2 -->
<link rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait)" href="style2.css">
<!-- style3 -->
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait)" href="medium-style.css">
Now the problem is that when I run the application in 480x 800 resolution screen then instead of using style2 it is using style1.I also tried using a single stylesheet and removing the viewport.I am also unable to find any phonegap documentation related to media queries.Please help

You could use
html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
css
/*240 - 320*/
#media (min-width: 320px) {
/*320 - 480*/
#media (min-width : 480px) {
/*480 - ...*/
....
//retina devices
#media only screen and (-webkit-min-device-pixel-ratio: 2.0)
The min-width is to Mobile First media queries.

Instead of spending hours on media queries (there are conflicts due to different interpretation across Android versions, and many more other disappointments) you can try https://github.com/biodiv/cordova-screengod
which does the job of scaling for you. You develop for one device and let the software scale your css to match the current device. Implementation is only a one-liner
screengod(['path/to/my.css'],function(){
/* do your app stuff */
});
and it also fixes screen problems like getting 320x480 on high-dpi devices. Furthermore, your css (without media queries!) not only works across Android devices, but all iOS and windows devices aswell, enabling you to write once - deploy everywhere.

Responsive design not working on Android?

I'm testing on both Nexus 4 - 4.1.1 - 768x1280 and Xperia Z - 4.2.2 - 1080x1920... In both cases, my site (which is responsive on desktops) is only partially responsive in android phones. WP8 works fine (surprisingly) - and iPhone 5 works - except the height is a little more than it should be (sticky footer isn't showing up). It's as if the CSS thinks there's an extra 100px or so - things are just slightly cut off when they shouldn't be. An example media query:
/* if device is less than 768px */
#media (max-width: 768px) {
.container{
width: auto;
max-width: calc(100% ~"-" 20px);
margin-left: 10px;
}
.banner-info{
padding-right: 15px;
width: auto;
max-width: 300px;
font-size: 13px !important;
}
}
In my header:
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What's going on here?

Try adding target-densityDpi=device-dpi to your meta viewport. It's an Android specific value.
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
UPDATE:
I recently found out that target-densityDpi is no longer supported. I solved a similar problem by combining -webkit-min-device-pixel-ratio with max-width while also not using target-densityDpi in my meta viewport:
#media all and (max-width:360px),
screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px),
screen and (-webkit-min-device-pixel-ratio: 2.0) and (max-width: 720px) {
// CSS HERE
}

http://caniuse.com/#feat=calc
The version on Android you are using does not support calc and you must provide a fallback. I suggest something like this:
width: 90%; /* fallback */
width: calc(100% - 20px);
But now your pixel-based margin is not going to result in a centered layout. At that point, I suggest you just forget the "calc" altogether and use plain 'ol css:
width: 90%;
margin: 0 auto;

Adroid phone like the nexus or Galaxy serie have a "retina desplay" mening the pixel ratio is 2 so you have to add this (-webkit-min-device-pixel-ratio: 2)
so
#media (max-width: 768px) and (-webkit-min-device-pixel-ratio : 2)

I used this code in header
<meta name="viewport"
content="target-densitydpi=device-dpi,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
it worked for me

Responsive web design: Android default browser "thinks" that he is larger than he is

I've got following Meta tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
and CSS rules
#media all and (max-device-width: 640px) { ... }
#media all and (max-device-width: 480px) { ... }
When I open site by Chrome on my phone everything works as expected - max-device-width: 480px rules are used. But when I open site by Android 4 default browser it uses max-device-width: 640px rules. Can you explain such behaviour?

try using this tag #media(max-width: 640px){...} and #media(max-width: 480px){...}..