获取页面内容的高度 [英] Get height of page content

问题描述

我正在尝试获取网页正文的高度。我希望它能够以100％的缩放率在高清屏幕上加载页面时的价值。

I am trying to get the height of the body of a webpage. I want it to be the value of when the page is loaded on an HD screen at 100% zoom.

这点的重点在于改变Meta中的视口数据，并能够强制移动浏览器一次加载整个页面，并阻止设计的响应。

The point of this is to then change the viewport in the Meta data and be able to force a mobile browser to load whole page at once, and block the responsiveness of the design.

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

我有这个函数可以工作，但是给了我两个不同的值，不管我打开页面电脑或手机上。

I have this function it works but gives me 2 different values on my whether i open the page on a computer or on a phone.

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

On a computer with and HD screen i get 944 and on a phone i get 2044. 944 is the right value.

谢谢

Thanks

推荐答案

问题是您拥有高像素密度手机，网页的像素比例增加。将高度除以 window.devicePixelRatio 来解释这一点。

The problem is that you have a high pixel density phone that renders the web page at an increased pixel ratio. Divide height by window.devicePixelRatio to account for this.

注意：我不认为你的获取方法高度特别理想。而不是仅仅选择最大的5个值，你应该只使用一个值。也许 window.innerHeight 会做诡计吗？

Note: I don't think your method of getting the height is particularly ideal. Instead of just picking the biggest of like 5 values, you should just use one value. Perhaps window.innerHeight would do the trick?

这篇关于获取页面内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！