获取页面内容的高度

Question

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.

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.

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

Thanks

Answer 1

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.

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?