0

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

0xtuytuy
  • 1,494
  • 6
  • 26
  • 51

1 Answers1

2

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?

Hayden Schiff
  • 3,280
  • 19
  • 41
  • with window.devicePixelRatio i sitll get 2 different values (1024 on my phone and 955 on a computer), i'll try know with window.innerheight – 0xtuytuy Aug 13 '15 at 15:20
  • Actually, window.innerHeight is the height of the visible space of your screen, so that might not be what you want; mea culpa. Are you sure that the height difference is a mistake though? It's quite possible (probable even) that your body would be different heights on different devices because of text wrapping differently and so forth. – Hayden Schiff Aug 13 '15 at 15:22
  • and same with the innerHeight i get the same 2 values. Well that is the point i dont want the heights to be different, i want them to be exacly the same and then allow the user to zoom in or out on the page without resizing all the content inside of it. I am using Chrom on the computer and on the mobile, I'm not sure if it actually matters. – 0xtuytuy Aug 13 '15 at 15:24
  • But the height might be different through no fault of your height detection code. You might have a paragraph of text that wraps to 2 lines on your wide desktop screen, but gets crammed into 3 lines on your mobile device. That would unavoidably affect the total height of the body. – Hayden Schiff Aug 13 '15 at 15:26
  • i understand that and that is what i want to avoid, i want it to be exaclty the same on a desktop then on a mobile. – 0xtuytuy Aug 13 '15 at 15:27
  • This seems like a different question than your original problem of just accurately detecting the height; perhaps opening a new question would be a good idea? – Hayden Schiff Aug 13 '15 at 15:29
  • i did and the answer was to play with the viewport: http://stackoverflow.com/questions/31960409/converting-responsive-bootstrap-design-to-static?noredirect=1#comment51829730_31960409 – 0xtuytuy Aug 13 '15 at 15:29
  • however i need to detect what value i want to input in the viewport and this value needs to be calculated on the fly for each page of my application, that is why i need a script that calculates the height of the body – 0xtuytuy Aug 13 '15 at 15:30