Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    81
    Thanks
    7
    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
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 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:

    Code:
    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.
    Stephen
    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
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 591 Times in 572 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.

    Code:
    <div id='hint'></div>
    Code:
    @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);  } }

    Code:
    alert(
      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 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

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