Is it possible to include js or css based on screen size?

#1

Hi

I was wondering if it’s possible to include css or js based on the size of the screen. For example on desktop I’d like to display something which requires js, however on mobile I would like to hide that. In the latest cookbook recipe there was an option to include css/js/code based on the page. Is it possible to expand that and also add screen size?

This is the code I’m referring to.

<?php if ($page->intendedTemplate()->name() === 'album'): ?>
<?= css('assets/js/Glider.js-master/glider.css') ?>
<?php endif ?>
#2

You could probably do it with mobile detect plugin

1 Like
#3

An option would be to use the media attribute: <link>: The External Resource Link element - HTML: HyperText Markup Language | MDN

1 Like
#4

Thanks James, thats definitely a handy plugin!

Sonja, with the css helper I should be able to pass an attribute for media size below, is that right?

media="screen and (max-width: 600px)"
#5

Yep, right, but it actually only works for CSS, not for JS files. But for JS files you could load them conditionally with script based on screen width.

#6

Okay thank you - I’ll look into that. I actually need it for js :smile: