<h2 id="screen">Screen Information</h2>

<div class="intro">
    HeadJS also knows information about the current screen & viewport size
</div>

<div class="code-example" data-title="head.screen">
    <p>These variables are accessible via JavaScript (all the time) so you can apply certain logic depending on specific use-cases</p>

    <ul>
        <li>
            head.screen.height (int)
            <ul><li>This is the <strong>height</strong> of the screen (<strong>resolution</strong>) no matter the size of the current browser window</li></ul>
        </li>
        <li>
            head.screen.width (int)
            <ul><li>This is the <strong>width</strong> of the screen (<strong>resolution</strong>) no matter the size of the current browser window</li></ul>
        </li>
        <li>
            head.screen.innerHeight (int)
            <ul><li>This is the <strong>height</strong> of the inside of the browser window (<strong>viewport</strong>), 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 !</li></ul>
        </li>
        <li>
            head.screen.innerWidth (int)
            <ul><li>This is the <strong>width</strong> of the inside of the browser window (<strong>viewport</strong>), 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 !</li></ul>
        </li>
        <li>
            head.screen.outerHeight (int)
            <ul><li>This is the <strong>height</strong> of the entire browser, and varies depending on if the browser is resized or not.</li></ul>
        </li>
        <li>
            head.screen.outerWidth (int)
            <ul><li>This is the <strong>width</strong> of the entire browser, and varies depending on if the browser is resized or not.</li></ul>
        </li>
    </ul>

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

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

{% highlight css %}
.h-lt1024 {
    /* code specific to VIEWPORT HEIGHT < 1024 */
}

.w-gt800 {
    /* code specific to VIEWPORT WIDTH > 800 */
}
{% endhighlight %}

    <p>You can select which variables (lt, gt) and which breakpoints (480, 640, 800, etc) are exposed via CSS in the <a href="#configuration">configuration</a> section.</p>

    <div style="width:100%;">                            
        <div onclick="blog.loadComments(this, 'api/2.0.0/screen', 'Leave a comment')" style="cursor: pointer;">
            <h2>Show Comments</h2>
        </div>
    </div>
</div>
