Direct the website to the Ipad with new css suitable for Ipad

Question

I have website with two css flies the first one to view the site in a desktop screen the second one to view it in Ipad screen , Knowing that they have the same HTML code ,,
my Q : is there any code to detect the Ipad and force to take the css file that is suitable for it??

thxx

edited section:
dears thxxx for the answer but css effect no longer appear, I think I code something wrong, what I have done is :

in the main page at the header I add thess lines:

<meta name="viewport" content="width=980" /><br/>
<link href="css/site.css" rel="stylesheet" type="text/css">

inside the site.css I 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;}
}

but this not work ... can you help please !!

Both Kev and ricardohdz's solutions are valid - a huge advantage of using media queries rather than User Agent string is that the styles can then be used by Android or Windows 8 tablets with the same or similar resolutions. For this to be most effective use flexible layouts with relative units (such as percent) where-ever possible. — pwdst, Mar 31 '13 at 16:24
My 2 cents here. I always find it wrong that people are talking about supporting iPad, iPhone, etc, when the right approach will be to research how to support different screen sizes. — Alqin, Mar 31 '13 at 18:16

score 1 · Answer 1 · answered Mar 31 '13 at 06:02

You can use media queries for that. Just put below CSS code at the top of your iPad file and inside all the styles related to that device:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Put your iPad styles here (this covers portrait and landscape modes) */
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Put your iPad styles here (this covers landscape mode)*/
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Put your iPad styles here (this covers portrait mode)*/
}

What the media queries do is they check for the device width to identify if its an iPhone, iPad or any other mobile device. For more info just google "media queries".

dear thxxx for the answer but css effect no longer appear, I think I code something wrong, what I have done is : in the main page at the header I add thess lines: — Momo88, Apr 01 '13 at 07:44
Try reducing the viewport on your screen. DO that by resizing the window and see of the styles come up. — ricardohdz, Apr 05 '13 at 16:51

score 1 · Answer 2 · answered Mar 31 '13 at 09:41

1

Use media queries to determine screen size.

Phone & iPod touch:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4 & iPod touch 4G:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

answered Mar 31 '13 at 09:41

Kevin Lynch

24,427
3
36
37

thxxx for the answer but the css effect no longer appear I don't know why !!,, – Momo88 Apr 01 '13 at 07:56

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

Best way for that are mediaqueries:

Detect iPhone/iPad purely by css

Load css file for ipad only

Or detect with JS or PHP the USER-AGENT.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 31 '13 at 06:28

SoldierCorp

7,610
16
60
100

score 0 · Accepted Answer · answered May 07 '13 at 07:36

0

I add this line of code in my asp.net Solution at <header> area:

   <% if (Request.UserAgent.ToLower().Contains("ipad"))
    { %>
    <link rel="stylesheet" type="text/css" href="css/siteIpad.css" />

    <% } %>

it's work fine,,,,

answered May 07 '13 at 07:36

Momo88

61
1
2
10

Direct the website to the Ipad with new css suitable for Ipad

4 Answers4