获取页面内容的高度

Question

我正在尝试获取网页正文的高度。我希望它是页面以 100% 缩放加载到高清屏幕上时的值。

这样做的目的是改变元数据中的视口，并能够强制移动浏览器一次加载整个页面，并阻止设计的响应性。

function calculateHeightOfBody() {
var body = document.body,
html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', /*'width='+width+',*/ 'height='+height);

alert('height is ' + height);

我有这个功能，但无论我是在电脑上还是手机上打开页面，它都会给我 2 个不同的值。

在带有高清屏幕的计算机上我得到 944，在手机上我得到 2044。944 是正确的值。

谢谢

Answer 1

问题在于您有一部高像素密度的手机，它以更高的像素比率呈现网页。将高度除以 window.devicePixelRatio 以解决此问题。

注意：我不认为你得到高度的方法特别理想。不要只选择 5 个值中最大的一个，而应该只使用一个值。也许window.innerHeight 可以解决问题？