Screen Information

HeadJS also knows information about the current screen & viewport size

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

{% 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 %} .lt-800 { /* code specific to VIEWPORT < 800 */ } .gt-800 { /* code specific to VIEWPORT > 800 */ } {% endhighlight %}

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

Show Comments