How to make CSS for mobile devices - html

Question

I have a HTML site and that has some images that I do not want to be seen on a mobile devices or on desktop.
for example:
HTML Code: (index.html)
<link rel="stylesheet" type="text/css" href="css/style.css" />
//Image for desktop
<img class="desktop" border="0" src="images/logo.png">
//Image for mobile device
<img class="mobile" border="0" src="images/logo-mobile.png">
CSS Code: (style.css)
/* #Desktop
================================================== */
.mobile {
display: none;
}
/* #Mobile
================================================== */
#media only screen and (max-device-width: 480px) {
.desktop {
display: none;
}
}
I use this CSS code but does not work.

Answer 1

Use CSS3 Media Queries
#media (min-width: 1100px) {
h1:after {
content: 'Large screen';
}
}
#media (max-width: 1100px) {
h1:after {
content: 'Medium screen';
}
}
#media (max-width: 480px) {
h1:after {
content: 'Small screen';
}
}
-DEMO-

Answer 2

The answer is in media queries itself...i used this and it seems to work for me
#media screen and (max-device-width:480px)

Answer 3

The problem is that you are not resetting the display: none on the .mobile class on mobile screen, and your .mobile class elements will remain hidden. You have to add the following to your media query in order to make the .mobile class visible:
.mobile {
display: block;
}
Final coode:
/* #Desktop
================================================== */
.mobile {
display: none;
}
/* #Mobile
================================================== */
#media only screen and (max-device-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
EDIT
As I can see, you will have problems to detect which device is a mobile device based on resolution, so I will recommend you to detect it by using the User Agent string, it will have bigger success in your case.
Here is what you should do:
1) Include this in a javascript file loaded on the page:
$(document.body).ready(function(){
var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if(isMobile) {
$("html").addClass("mobile-device");
} else {
$("html").addClass("desktop-device");
}
});
2) Change your css to:
/* #Desktop
================================================== */
.desktop-device .mobile {
display: none;
}
/* #Mobile
================================================== */
.mobile-device .desktop {
display: none;
}
This should work for most(maybe 99.9%) of the mobile devices that cand be bought. Hope this helps you.

Answer 4

use media-queries-for-standard-devices
use it like this
/* #Desktop
================================================== */
.mobile {
display: none;
}
.desktop {
display: block;
}
/* #Mobile
================================================== */
#media only screen and (max-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
For HTC One try
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
}
NOTE Don't forget to add this inside tag
<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 5

css:
#media screen and (max-device-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
IT will work. see link http://cssmediaqueries.com/what-are-css-media-queries.html