Prevent CSS document from loading on mobile devices

Question

Trying to increase the loading speed for mobile devices, and there is at least one CSS document I don't want to be loaded on mobile.

I have already prevented a script from loading, but the CSS document is kinda different.

Here is an example of what I don't want to be loaded on mobile devices:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css">

Do you have a working solution?

Not sure what tags are the most correct, as this could probably be done by a CSS in the beginning of the document, or jQuery or HTML.

Do you know whether the device is mobile or not at the point in time where the page is being rendered by PHP? — Mike Brant, Jul 21 '15 at 19:06
I have not added a specific detector for mobile devices seing away from the UserAgent I have added. You can take a look here: http://codeviewer.org/view/code:5389 — Olen, Jul 21 '15 at 19:21

score 2 · Answer 1 · answered Jul 21 '15 at 19:06

Option 1: Use PHP to check the user agent string and compare it against known mobile browsers. http://php.net/manual/en/function.get-browser.php

Option 2: Use Javascript to check the user agent string and/or window width/height and add the CSS if it checks out.

Option 3: Use a media query and @import if the targeted device checks out https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Since you already have javascript-based mobile detection (you should have noted this in OP as it is REALLY important), you can use javascript to load the CSS. You could do something as simple as:

<script>
if(!isMobile.any()) {
    document.write('<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css">');
}
</script>

This is a very simple approach. It might actually be better to use DOM manipulation to insert this link. Check out this SO answer for more thoughts on how you can do that - How to load up CSS files using Javascript?

edited May 23 '17 at 11:51

Community

1
1

answered Jul 21 '15 at 19:25

Mike Brant

70,514
10
99
103

Thank you very much. Sorry for not posting that, I did not think they could be combined. That solved the problem tho. – Olen Jul 21 '15 at 19:42

score 0 · Answer 3 · answered Jul 21 '15 at 19:04

0

http://mobiledetect.net/ This can be a good option for you, only put

<?php if($detect->is("Crhome")){ ?><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css"><?php } ?>

answered Jul 21 '15 at 19:04

Jjsg08

124
11

score 0 · Answer 4 · answered Jul 21 '15 at 19:10

0

You can use the media atribute to optionally load CSS files based on viewport size...

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/animations.css" media='screen and (min-width: 800px)'>

Though this depends on what you call a "mobile device"

answered Jul 21 '15 at 19:10

user4651781

28
4

You would likely need to use a combination of browser width and pixel density to make this determination as many smartphone now have higher resolutions than desktop/laptop computers. – Mike Brant Jul 21 '15 at 19:11

score -2 · Answer 5 · answered Jul 21 '15 at 19:06

-2

You can use media queries for all your css to determine when to use css and when to not

Example: @media (max-width:600px)

answered Jul 21 '15 at 19:06

Huang Chen

1,177
9
24

A simple media query like this will likely not be useful in this day and age where many mobile devices (including phones) have higher resolutions that desktop/laptop screens. Plus this doesn't address the OP's concern that he he wants to minimize CSS download size on mobile devices, as you would have both mobile and full website CSS downloaded. – Mike Brant Jul 21 '15 at 19:09

Prevent CSS document from loading on mobile devices

5 Answers5