I have a website with two CSS files: one for viewing the site on a desktop screen and the other for viewing it on an iPad screen. Despite having the same HTML code, is there a way to detect the iPad device and force it to use the appropriate CSS file?
Thank you.
Edited section:
Thank you for the response, but unfortunately, the CSS effects are no longer appearing. I believe I may have coded something incorrectly. Here's what I've done:
<meta name="viewport" content="width=980" /><br/>
<link href="css/site.css" rel="stylesheet" type="text/css">
In the site.css file, I included the following code:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
*
{
margin::0;
padding:0;
}
html , body
{
margin:0;
padding:0;
width:100%;
font-family:"Trebuchet MS";
font-size:12px;
}
.Wrapper{margin:0 auto;}
.InnerWrapper{width:100%;
margin:0;
padding-top:140px;
float:none;
display:block;
height:auto;}
.Header{padding-bottom:0;
height:140px;
background: none repeat scroll 0 0 #FFFFFF;
z-index: 100000;
position: fixed;
color: #000000;
float: left;
width: 100%;
box-shadow:0 -1px 7px 5px #888888;}
}
However, this solution does not seem to be working. Can anyone provide assistance? Thank you!