Why is the value returned by clientWidth and window.innerWidth on the mobile page the same?

I did a test page to find out about viewport and didn"t put any meta tags in it.

in theory, because the screen on the mobile phone is too small, the browser will create a virtual layout viewport, whose width will be larger than the width of the browser screen in order to display all the web content as normally as possible (usually 980px), and press this to typeset the page. This value is usually obtained through document.documentElement.clientWidth.

at the same time, we also need to obtain the size of the visual area of the browser, which is usually obtained through window.innerWidth (it is also possible to find screen.width in practice).

but after the actual operation, it is found that in the above cases (without any meta tags to control viewport-related attributes), the value of window.innerWidth and the value of document.documentElement.clientWidth are equal to 980px, rather than one big and one small. Why is this?

my page structure is as follows:

<!DOCTYPE html>
<html lang="en" style="font-size: 50px;">
<head>
    <meta charset="utf-8"/>
    <title>Viewport test</title>
</head>
<style>
    html,body{
        width: 100%;height: 100%;
    }
</style>
<body>
    <h1>Viewport test !</h1>
    <div id="div1">
        <div id="div2"><label id="label" onclick="testFn()">test element from point</label></div>
        ppkviewportppkviewport
        viewportviewport768x10241080x1920css1px1pxcss1pxdevicePixelRatiocss1px1px1080x1920div300pxdevicePixelRatioviewportviewportviewport980pxppkviewport layout viewportlayout viewport document.documentElement.clientWidth 
        layout viewport viewport ppkviewport visual viewportvisual viewportwindow.innerWidth Android 2, Oprea mini  UC 8
    </div>
</body>
<script>
  console.log("Hello world");
  window.onload = function () {
    alert("screen width:" + screen.width + "," + "clientWidth:" + document.documentElement.clientWidth + ",innerWidth:" + window.innerWidth)
  }
</script> 
</html>

reference blog post: in-depth understanding of viewport developed by mobile front-end-unparalleled-blog garden

Oct.03,2021

on the pc browser
window.innerWidth the width obtained is
document.documentElement.clientWidth , the width obtained does not include the scroll bar width
, so the width is different, of course, the page is the same no more than one screen

on the mobile browser, the scroll bar is suspended on the content of the page and does not occupy the width, so you get the same

.
Menu