SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get CSS pixels of a device

    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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I suspect you won't be able to find a definitive answer as a pixel isn't a pixel. Something that may help you though is window.devicePixelRatio

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi markbrown4,

    I have been using window.devicePixelRatio but I can't see how that can help me.


Bookmarks

Posting Permissions

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