Grow your CSS skills. Land your dream job.

Last updated on:

Viewport Size, Screen Resolution, Mouse Postition

This code is cross-browser compatible and checks the dimensions of the viewport, the screen resolution and the mouseposition which can be quite helpful to perform some checks with JavaScript.

<script type="text/javascript">
function getViewportWidth()
{
       if (window.innerWidth)
       {
               return window.innerWidth;
       }
       else if (document.body && document.body.offsetWidth)
       {
               return document.body.offsetWidth;
       }
       else
       {
               return 0;
       }
}

function getViewportHeight()
{
       if (window.innerHeight)
       {
               return window.innerHeight;
       }
       else if (document.body && document.body.offsetHeight)
       {
               return document.body.offsetHeight;
       }
       else
       {
               return 0;
       }
}

var tellMeTheSizes=function()
{
       document.getElementById("viewportwidth").innerHTML = getViewportWidth() + "px";
       document.getElementById("viewportheight").innerHTML = getViewportHeight() + "px";
       document.getElementById("resolutionheight").innerHTML = screen.height + "px";
       document.getElementById("resolutionwidth").innerHTML = screen.width + "px";
}

window.onload=function()
{
       tellMeTheSizes();
}

window.onresize=function()
{
       tellMeTheSizes();
}

window.onmousemove=function(event)
{
       ev = event || window.event;
       document.getElementById("mousetop").innerHTML = ev.pageY + "px";
       document.getElementById("mouseleft").innerHTML = ev.pageX + "px";
}
</script>

Comments

  1. Jack Dunstan
    Permalink to comment#

    Hullo,

    The reference URL is 404.

    Cheers,

    J.

  2. Hey, check the typo “Mouse Postition”. I think it should be “Mouse Position”. Cheers.

  3. We have created a demo on http://jsbin.com/apeveq/

  4. Munawar, that is a great demo.

  5. Munawar! There’s a very little mistake I didn’t wanted to mention but I thought I should tell you. The Mouse Position Y and X are printing wrong. i.e. The X is printing position Y and Y is printing position X. Actually I looked at the code too. The top is loading Y position and left is loading X position, which is correct but they are printing under wrong label. By the way demo is awesome. To CSS Tricks too, the whole snippet is awesome. I just wanted to ask one thing. How can I use this data to fix the CSS issues that occurs at different screen resolutions. I want a Javascript solution rather than CSS3 solution as I know the trick with media queries. Hope that I will get my answer soon. Thank you..

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".