Google Chrome Inspector Tool 是出了名的错误吗？

问题描述

我已经很长时间没有编写代码了，所以我对最近遇到的一些事情很好奇。我开始创建一个 html/css 文档，它（到目前为止）由几个 div 和一个表头组成。我将我的 div 的宽度设置为 768px（设计一个专门使用 iPad 的应用程序）并指定一个背景颜色以确保它可见。当我右键单击，选择 Inspector 并将视图设置为 iPad 时，它显示我的 div 超出了屏幕的右边缘（即出现了滚动条）。 div 被指定为 768 像素，没有边距或填充，我包含在另一个 div 中的图形被放大，看起来比其 320 像素宽 x 100 像素高的尺寸大得多。我尝试刷新，关闭选项卡并重新打开，但两种方法都没有让我觉得屏幕看起来可信。当我将第 th 元素中的 font-size 从 14px 更改为 10px 时，屏幕神奇地自行纠正，使所有内容看起来都正确缩放并且不存在滚动条。当我将其改回 14px 时，它仍然可以。我想知道你们中是否有任何更有经验的开发人员可能知道有关检查工具的一些怪癖或错误。我应该把它当作一粒盐还是被认为是一个可靠的工具？会不会有更险恶的事情发生？我已经包含了我的代码以防万一，但我猜它更多的是某种类型的故障。任何人都可以对此有所了解吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="321s2CSS.css">   
    <link rel="icon" href="justball.jpg">
    <style>
        .header{
    height: 100px;
    display: flex;
    align-self: center;
    padding-top: 5px;
    padding-left: 5px;
}
.pageTitle{
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 4px 4px 2px darkgray;
    margin-left: 30px;
}

.bar{
    background-color: #59CBE8;
    Box-shadow: 0 4px 2px -2px gray; 
    height: 40px;   
    width: 768px;
}
img{
    height: 95%;
    width: auto;
}
table{
    border-collapse: collapse;
    margin-top: 20px;
}
th,td{
    border: 1px solid lightgray;
    font-size: 10px;
}
th{
    background-color: darkgray;
}
.leftJust{
    text-align: left;
}
    </style>       
</head>
<body>
    <div class="header">
        <div class="letterhead">
            <img src="letterhead.png" alt="">

        </div>
        <!-- <div class="pageTitle">
            Match Fees & 321s
        </div> -->
    </div>
    <div class="bar"></div>
    <table>
        <colgroup>
            <col span="1" style="width: 10px;">
            <col span="1" style="width: 10px;">
            <col span="1" style="width: 10px;">
            <col span="1" style="width: 170px;">
            <col span="1" style="width: 80px;">
            <col span="1" style="width: 65px;">
            <col span="1" style="width: 65px;">
            <col span="1" style="width: 65px;">
        </colgroup>
        <thead>
            <th>Paid</th>
            <th>Waived</th>
            <th>Owes</th>
            <th class="leftJust">Player</th>
            <th>Ref rating</th>
            <th>1 point</th>
            <th>2 points</th>
            <th>3 points</th>
        </thead>
        <tbody>

        </tbody>
        <tfoot>

        </tfoot>
    </table>
    
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-chrome google-chrome-devtools html