How subscribe more or less data based on device type/size?

I have a responsive design for a website, so that it shows correctly either in desktop or mobile. My app is sort of a video gallery. (I’m using blaze, if that’s relevant.)

However I would like to change the number of previews in desktop (about 9) and in mobile (probably 3), because a full screen in a desktop is different from a full screen in a mobile device.

I know how to only show some of the content by using CSS to hide/show different layouts on different viewports. However I’m trying to limit the data downloaded by the app, and not the data shown.

I was thinking I could achieve this by filtering my collection, however how do I identify the client device/viewport?