Conditional include on css file for ipad

Question

I need to stop inclusion of a specific CSS file only after checking if its an ipad or not

Can this be done using javascript or css

something like

<!--[if !isAppleProduct()]>
   <link href="./css/fluid.css" type="text/css" rel="stylesheet" />
<![endif]-->

You can't test to see if it's an apple product but you can use media queries to change your CSS depending on the screen resolution. — Mitchell Layzell, Aug 27 '13 at 07:06
Try looking into getting its user-agent. I don't think it's very accurate, but atleast it's something. http://stackoverflow.com/questions/2153877/what-is-the-ipad-user-agent — MisterBla, Aug 27 '13 at 07:07
Actually mitchell, it won't work in my case, so i m just trying to find out an option like — Vipin, Aug 27 '13 at 07:14
What language are you looking to use JS or PHP? It can't be done with on conditional statement you will either need to use JS or PHP to detect the users browser and or OS. — Mitchell Layzell, Aug 27 '13 at 07:25

xec · Accepted Answer · 2013-08-27T07:43:18.993

The conditional comment syntax you're using is a IE-only feature (discontinued in IE10) so you can't use that to detect anything else.

With JavaScript however, you can do something like the following;

if (navigator.userAgent.indexOf("iPad") > -1) {
    // add classname "iPad" to the <body>
    document.body.classList.add("iPad");
}

Then you can prefix any CSS rules with .iPad to only apply to the iPad.

.iPad .myClass {
    /* iPad-specific css */
}

Alternatively, you could use the same test to include an ipad-specific css file:

if (navigator.userAgent.indexOf("iPad") > -1) {
    var ipadCss = document.createElement("link");
    ipadCss.type = "text/css";
    ipadCss.rel = "stylesheet";
    ipadCss.href = "/path/to/ipad.css";
    document.head.appendChild(ipadCss);
}

Thanks xec, the last option worked "document.head.appendChild(ipadCss)" — Vipin, Aug 27 '13 at 09:13

Anon · Answer 2 · 2013-09-04T14:28:57.007

0

@media only screen and (not (min-device-width : 768px)) and (not (max-device-width : 1024px)),
only screen and (not (min-device-width : 320px)) and (not (max-device-width : 568px)),
only screen and (not (min-device-width : 320px)) and (not (max-device-width : 480px)){
    /* CSS for Apple product here */
}

First row enable CSS for iPads, second row - for iPhone5 and third row - for iPhone4 or early

edited Sep 04 '13 at 14:28

answered Aug 27 '13 at 07:26

Anon

2,854
14
18

1

He said he doesn't want to use media queries and PS that doesn't detect is it's an Apple product that just test the screen's resolution. – Mitchell Layzell Aug 27 '13 at 07:29
Hmmmm... Its an entire css file that i need to skip being included for ipad, irrespective on screen width – Vipin Aug 27 '13 at 07:43
I change my answer with "not" operator – Anon Sep 04 '13 at 14:29

score 0 · Answer 3 · answered Jan 28 '14 at 08:49

Put this into header.php

<?php 
    $iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
    $iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
    if( $iPod || $iPhone || $iPad){ ?>
        <style type="text/css">
           /* put your css code */
    }
        </style>
    <?php }
?>

Thanks

score 0 · Answer 4 · answered Mar 14 '14 at 10:24

0

You can use headjs. You can detect the type of platform / device by using identifying the userAgent and then loading the css conditionally based on this.

answered Mar 14 '14 at 10:24

Mahendra Liya

12,912
14
88
114

Conditional include on css file for ipad

4 Answers4