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

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

<p>Here is a good question which should help you with this: <a href="https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window">Get the size of the screen, current web page and browser window</a></p>

CC BY-SA 3.0
2015-07-21T13:08:31.203Z
2015-07-21T13:08:31.203Z
2017-05-23T12:38:53.957Z
Alec Ritson
<p>You can only do this reliably in JavaScript with <code>window.screen.width</code> and <code>window.screen.height</code> (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen" rel="nofollow">MDN</a>), or <code>$(window).width()</code> and <code>$(window).height()</code> when using jQuery.</p>

<p>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.</p>

<p><a href="https://blog.cloudflare.com/introducing-mirage-intelligent-image-loading/" rel="nofollow">CloudFlare’s Mirage</a> solution, which resizes images in the way you propose, might be worth looking at.</p>

<p><em>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.</em></p>

CC BY-SA 3.0
2015-07-22T17:37:15.177Z
2015-07-22T17:37:15.177Z
Joshua Baker
<p>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 <a href="http://www.lukew.com/ff/entry.asp?1392" rel="nofollow">Responsive design + Server Side Component</a>s, or RESS.</p>

<p>I've made a plugin (a long time ago) named <a href="https://github.com/aelvan/RESS-Toolbox-Craft" rel="nofollow">RESS Toolbox for Craft</a>, 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. :)</p>

CC BY-SA 3.0
2015-07-22T10:04:50.863Z
2015-07-22T10:04:50.863Z
André Elvan
<p>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</p>

<responsive-images><craft-pro>
Detect device screen size in craft cms
# Detect device screen size in craft cms

(Asked by: username_0 on 2015-07-21)

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

**Tags:** responsive-images, craft-pro


---

## 3 answers

### Answer by username_1 on 2015-07-21. Score: 3

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](https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window)


---

### Answer by username_2 on 2015-07-22. Score: 2

You can only do this reliably in JavaScript with `window.screen.width` and `window.screen.height` ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Screen)), 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](https://blog.cloudflare.com/introducing-mirage-intelligent-image-loading/) 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.*


---

### Answer by username_3 on 2015-07-22. Score: 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 Component](http://www.lukew.com/ff/entry.asp?1392)s, or RESS.

I've made a plugin (a long time ago) named [RESS Toolbox for Craft](https://github.com/aelvan/RESS-Toolbox-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. :)


---

