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