有没有办法在没有视口元标记的情况下以硬件像素获取真实视口大小？

Question

我想用 javascript 获取视口宽度。但不是常见的虚拟视口。我需要逻辑硬件视口，在我的情况下，它不是设置视口元标记的选项。

为了解决我的问题：我想在 IPhone 5 上获得 320 像素（640 个硬件像素，像素比率为 2），尽管虚拟视口远超过 320 像素。

有办法吗？

谢谢，赫尔穆特

Answer 1

我在这篇文章中找到了答案：http://menacingcloud.com/?c=viewportScale

.. 并将其分解为真正重要的东西..

..所以，这是我的结果：

// 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);

这里有一个随时可用的功能供大家使用

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];
}

有没有办法在没有视口元标记的情况下以硬件像素获取真实视口大小？

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

javascript

hardware

device

viewport

pixel