0

Browser on my mobile phone gives strange value for these properties when <meta name="viewport" content="width=device-width> is not set:

alert(document.documentElement.clientWidth); // 360
alert(document.documentElement.clientHeight); // 1932

Here are all the values:

// mobile with <meta name="viewport" content="width=device-width>
document.documentElement.clientWidth: 360
document.documentElement.clientHeight: 710
window.innerWidth: 360
window.innerHeight: 710

and

// mobile without viewport
document.documentElement.clientWidth: 360
document.documentElement.clientHeight: 1932
window.innerWidth: 980
window.innerHeight: 1933

I thought that document.documentElement.clientWidth and document.documentElement.clientHeight are used to get viewport size without scrollbar if present and window.innerWidth and window.innerHeight are used to get viewport size with scrollbar if present.

Updated question: Does anybody know why document.documentElement.clientWidth and window.innerWidth are different when viewport is absent.

Improve this question
5
  • The values are correct, the unset viewport is simply larger in the most of the mobile screens than the viewable area. Commented May 27, 2024 at 11:59
  • 2
    developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag: "Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then zoom and pan to look more closely at different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space." Commented May 27, 2024 at 12:03
  • @Teemu yes, but document.documentElement.clientWidth is 360 and window.innerWidth is 980 when viewport is absent for both values? Commented May 27, 2024 at 12:05
  • There seems to be more about this at MDN behind the link CBroe has included in their comment above. Commented May 27, 2024 at 12:34
  • It's a known bug in Android. Here is the answer Commented Jun 4, 2024 at 20:44
Related questions
701
CSS3 100vh not constant in mobile browser
1
viewport doesn't work correctly
0
set meta viewport width but not show all content
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.