Reputation: 11
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
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