CODEWITHSUNDEEP
css
J.Fenty
J.Fenty

Reputation: 11

assign id to body tag based on device type

I'm wondering if there's any way that I can assign an id to a webpage based on the type of device. For example, I have the css set up as follows 

#desktop {
min-width:1200px;
min-height:500px;
}

#tablet {
min-width:600px;
min-height:480px;

#mobile {
min-width:320px;
min-height:400px;

What I would like to do is to assign these ids to the body tag, I know there are ways to detect a device and assign a css file, but can I assign an id to the body based on the device?

Upvotes: 1

Views: 161

Answers (1)

Romain
Romain

Reputation: 1948

What you need to do is use the css feature called media query.

Process: add in the head tag of your page the meta tag below to display correctly pages on device (size of text, width etc...)

<meta name="viewport" content="width=device-width" />

or

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

Check online to review differences, enable zoom etc...

Then, In your CSS, you will have to build it like this

CSS

Your curent css is here (for desktop)
    #the_name_of_the_div_is_the_same{
        width:100%;
        background-color:yellow;
    }

/* This are the 4 principals size of screen: */
/* No body is using this one
@media screen and (max-width: 1680px) {
    #the_name_of_the_div_is_the_same{
       Do something in css
    }
}*/

/* Then, if the width of the screen is under 960px and above 758px, your div will get this attributes */
@media screen and (max-width: 960px) {
    #the_name_of_the_div_is_the_same{
        width:80%;
        background-color:red;
    }
}

@media screen and (max-width: 758px) {
    #the_name_of_the_div_is_the_same{
        width:30%;
        background-color: black;
    }
}

@media screen and (max-width: 524px) {
    #the_name_of_the_div_is_the_same{
        width:70%;
        background-color: green;
    }
}

Dimensions:

iPhone 3+4 portrait w320 x 480

iPhone 5 portrait 320 x 568

Crappy Android portrait 240 x 320

Android (Samsung Galaxy) portrait 380 by 685

iPad portrait 768 x 1024

Kindle portrait 600 x 1024

Or you can use a plug-in to detect devices, and redirect them to the correct page (3 different pages, or load 3 different css etc) according to their device. Note: with this solution, your website won't be responsive but it will work across all devices.

Upvotes: 4

Related Questions