Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Thanked 0 Times in 0 Posts

    Get CSS pixels in JS

    I am trying to use JavaScript to get the number of CSS pixels that a device has.

    Basically, an old iPad has 1024x768 and a new one has 2048x1536 actual pixels, but they both have the same 1024x768 CSS pixels (the new one is a Retina / High DPI device).

    If I use screen.width and screen.height then in non-Apple stuff it shows the actual screen pixels, not the CSS pixels.

    screen.width/screen.heigh does actually return the CSS pixels on Apple stuff (so it returns 1024x768 on the new iPad).

    The Samsung Galaxy SIII however returns the device pixels, which is no good.

    I need a uniform way to return the CSS pixels.

    device name / device width pixels / CSS width pixels / screen.width returns
    old iPad / 1024 / 1024 / 1024
    new iPad / 2048 / 1024 / 1024
    an old mobile / 480 / 480 / 480
    Samsung Galaxy SIII / 720 / 360 / 720

    screen.innerWidth and .outerWidth won't work as on desktops the browser might not be fully opened.

    I need both the height and width of the screen's CSS pixels.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Sydney, Australia
    Thanked 666 Times in 655 Posts
    Why do you care how big the screen is when you can't use the space outside the browser viewport to display anything?

    To get the browser viewport size you could use the following:

    viewport = {
    'width': window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    'height': window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    and then reference the width and height using viewport.width and viewport.height

    The only time you can use anything outside of the viewport is where you are opening a new window and then screen.width and screen.height are the values you would need to work with.

    If neither of those provide what you need then you will need to explain in detail just exactly what you want it for as there is no way to get what you are asking for and so an entirely different approach would be required.
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 603 Times in 583 Posts
    you can use css media queries to apply a specific value to something based on css screen size, and then sniff that value using javascript.

    <div id='hint'></div>
    @media (min-width:600px) {  #hint {  background-color: rgba(0,0,0, 0.01);  } }
    @media (min-width:990px) {  #hint {  background-color: rgba(0,0,0, 0.05);  } }
    @media (min-width:1200px){  #hint {  background-color: rgba(0,0,0, 0.09);  } }

      Math.floor(parseFloat(getComputedStyle(hint, null)['backgroundColor'].split(",").slice(-1)[0]) * 100)
    ); //shows a 1, 5, or 9 depending on your screen
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts