Detect device screen size in craft cms

Question

How can I get the screen size in craft cms? I mean the device width in px, so for example I can get a static map image with the exact size to fit the device screen

Answer 1

I think you are going to struggle with this in Craft, you would need to do it through Javascript.

Craft runs off PHP which is a server side scripting language, you need a client side scripting language.

Here is a good question which should help you with this: Get the size of the screen, current web page and browser window

Answer 2

As Alec says, the server doesn't know details about the users screen, that has to be fetched with javascript client-side. But the information can be exchanged through a cookie so that the server can act according to it. When used in the manner you outline, this is known as Responsive design + Server Side Components, or RESS.

I've made a plugin (a long time ago) named RESS Toolbox for Craft, which I think will do what you want. Make sure you read the warning regarding caching first, though, there are a lot of caveats when it comes to RESS. :)

Answer 3

You can only do this reliably in JavaScript with window.screen.width and window.screen.height (MDN), or $(window).width() and $(window).height() when using jQuery.

It’s possible to use a server side directory of device sizes and compare the user agent, however this solution quickly falls down when screen orientation is taken into account, not to mention that it’ll be time consuming to maintain.

CloudFlare’s Mirage solution, which resizes images in the way you propose, might be worth looking at.

P.s. It might be worth posting a question with what you’re actually trying to do as it sounds like you might be approaching the problem in the wrong way.