Search code examples
htmlcssmobilemedia-queriesmobile-website

How to use media queries to display device-specific content

I am new to web development and I am trying to figure out how media queries work. I am trying to display one image for mobile devices and a bigger image for desktop. I have simplified the project to the maximum, to isolate the problem, and also made the background different colours to better differentiate. Here are my files:

HTML:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">

    <title>Website</title>

    <link rel="stylesheet" media="screen and (max-width:500px)" type="text/css" href="phoneStyle.css"> 
    <link rel="stylesheet" media="screen and (min-width:501px)" type="text/css" href="desktopStyle.css"> 

</head>

<body>      
    <div id="wrap">
            <img id="phone" src="phoneImg.jpg" height="100%"  />
            <img id="desktop" src="desktopImg.jpg" height="100%"  />            
    </div>
</body>

</html>

CSS:

phoneStyle.css

#desktop {
    display: none;
}

body {  
    background-color: red;
    margin: 0px;
}

desktopStyle.css

#phone {
    display: none;
}

body {  
    background-color: black;
    margin: 0px;
}

I only get the desktop image with the black background on both devices. I am testing on a local server using MAMP. Any help appreciated.

Solution

  • Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier if you know how to pin point a specific device. This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!

    /* Smartphones (portrait and landscape) ----------- */

    @media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    /* Styles */
}

    /* Smartphones (landscape) ----------- */

    @media only screen
and (min-width : 321px) {
    /* Styles */
}

    /* Smartphones (portrait) ----------- */

    @media only screen
and (max-width : 320px) {
    /* Styles */
}

    /* iPads (portrait and landscape) ----------- */

    @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    /* Styles */
}

    /* iPads (landscape) ----------- */

    @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    /* Styles */
}

    /* iPads (portrait) ----------- */

    @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    /* Styles */
}

    /* The New iPad (iPad 3) ----------- */

    @media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
}

    /* iPhone 4 ----------- */

    @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}