Is there a way to get the real viewport size in hardware-pixels without viewport meta tag?

Question

I want to get the viewport width with javascript. But not the common virtual viewport. I need the logical hardware viewport and in my case it's not an option to set the viewport meta tag.

To clearify my issue: I want to get 320 pixels on IPhone 5 (640 hardware pixels with pixel ratio 2) though the virtual viewport is much more than 320 pixels.

Is there a way to do that?

thanks, Helmut

Answer 1

I've found my Answer in this article: http://menacingcloud.com/?c=viewportScale

.. and breaked it down to the real essential things ..

.. so, this is my result:

// cross browser way to get the common viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

// cross browser way to get the orientation:
var isLandscape = document.documentElement.clientWidth > document.documentElement.clientHeight;

// then get the logical screen width if the screen is smaller than the viewport
// otherwise get the viewport width
var screenWidth = screen.width < viewportWidth ? 
    Math[isLandscape ? 'max' : 'min'](screen.width, screen.height) :
    viewportWidth;

// screen width
console.log(screenWidth);

Here is a ready to use function for all of you

function getLogicalDeviceDimensions() {
    // cross browser way to get the common viewport width:
    var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

    // cross browser way to get the orientation:
    var isLandscape = document.documentElement.clientWidth > document.documentElement.clientHeight;

    // then get the logical screen size if the screen is smaller than the viewport
    // otherwise get the viewport size
    var screenWidth = screen.width < viewportWidth ?
            Math[isLandscape ? 'max' : 'min'](screen.width, screen.height) :
            viewportWidth;

    var screenHeight = screen.height < viewportHeight ?
            Math[isLandscape ? 'min' : 'max'](screen.width, screen.height) :
            viewportHeight;

    return [screenWidth, screenHeight];
}