These variables are accessible via JavaScript (all the time) so you can apply certain logic depending on specific use-cases

• head.screen.height (int)
  • This is the height of the screen (resolution) no matter the size of the current browser window
• head.screen.width (int)
  • This is the width of the screen (resolution) no matter the size of the current browser window
• head.screen.innerHeight (int)
  • This is the height of the inside of the browser window (viewport), and varies depending on the current size of the browser. It also does not include any eventual menu bars or toolbars. This is the default value when you want to do responsive design !
• head.screen.innerWidth (int)
  • This is the width of the inside of the browser window (viewport), and varies depending on the current size of the browser. It also does not include any eventual menu bars or toolbars. This is the default value when you want to do responsive design !
• head.screen.outerHeight (int)
  • This is the height of the entire browser, and varies depending on if the browser is resized or not.
• head.screen.outerWidth (int)
  • This is the width of the entire browser, and varies depending on if the browser is resized or not.

{% highlight js %} if (head.screen.innerHeight < 800) { /* code specific to VIEWPORT < 800 */ } {% endhighlight %}

Viewport width information is exposed via CSS so you can apply responsive design principles to your website. These have the advantage of working even on browsers that do not support media queries !

{% highlight css %} .h-lt1024 { /* code specific to VIEWPORT HEIGHT < 1024 */ } .w-gt800 { /* code specific to VIEWPORT WIDTH > 800 */ } {% endhighlight %}

You can select which variables (lt, gt) and which breakpoints (480, 640, 800, etc) are exposed via CSS in the configuration section.