Chrome 开发者工具的一个小坑
最近接了份私活，当了个切图仔
调移动端页面的时候发现一件怪事：用PC端Chrome的开发者工具调试好的页面，转移到真机上之后，页面似乎被缩放了，超出了范围，导致需要滚动浏览
这个问题困扰了笔者一段时间，现在把研究过程记录下来以备参考
点击此处，展开目录
Chrome的调试
众所知之，PC端Chrome在按下F12按钮之后会弹出来开发者工具，可以调试网页。当然了，现在是移动端时代，所以这个工具也能用来调试移动端网页。按一下这个开关，就可以切换为移动端模式，网页区域可以让你设置好屏幕尺寸，更加接近真机：
这个按钮笔者碰到的怪事就源自于此。为了方便复现，不妨尝试下打开下面这个PoC：
<html lang="zh-Hans-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>test</title>
</head>
<body>
</body>
<script>
const getSize = () => {
document.body.innerHTML = `屏幕尺寸：${window.screen.width} x ${window.screen.height}<br>
缩放比例：${window.devicePixelRatio} <br>
可视区域尺寸：${document.body.clientWidth} x ${document.body.clientHeight}`;
}
window.onresize = getSize;
getSize()
</script>
</html>在移动端模式下，你可能会看到类似这样的结果：
看着还挺好，对吧。现在改成在安卓真机上打开这个PoC：
你发现了吗，不同于PC Chrome，真机上的可视区域尺寸小于屏幕尺寸
复盘
出现问题的原因很简单：PC Chrome的开发者工具，并没有模拟出真机上『顶部地址栏』和『下部导航栏』的设置，导致可视区域尺寸等于屏幕尺寸（相当于真机上一直全屏）。
换句话说，如果你把模拟器里面的屏幕尺寸设置为真机屏幕尺寸，那么做出来的效果在真机上是偏大的。
Fix
解决办法也很简单，把PC段模拟器的屏幕尺寸，设置为真机可视区域尺寸（也就是PoC中第三行的数值）即可解决
（完）