Chrome的检测设备非常不准确？

Question

我试图在1366x768笔记本电脑上看到该页面的样子。

在Inspect设备中，它看起来非常好：

但在实际的笔记本电脑上，它看起来像这样：

顺便说一句！ ： - /当我在大屏幕上工作时非常令人沮丧，我无法每分钟在小笔记本电脑屏幕上查看它。

为什么页面在1366x768的镀铬设备上非常适合检查，但在实际的1366x768屏幕上却非常糟糕？

可能会发生什么提示？

CSS：

/* Split the screen in half */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Control the left side */
.left {
  left: 0;
}

/* Control the right side */
.right {
  right: 0;
}

/* If you want the content centered horizontally and vertically */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.form {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  color:black;
  max-width: 560px;
  min-width: 500px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border-color: #eee;
  border-width: 1px;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;


}


.Forgot-Password {
  font-family: "Roboto";
  font-size: 17px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  margin-top:15px;
  text-align: center;
  color: #555556;
}

.form button {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background:#009bf7;
  width: 100%;
  border: 0;
  padding: 15px;
  font-size: 17px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  color:white;

}
.form button:hover,.form button:active,.form button:focus {
  background:#0c6ea7
}


.form button:disabled {
  background: #dddddd;
}




.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}
.form .register-form {
  display: none;

}

HTML标记：

<div  class="split left">
    <div class="centered">
        <div style="margin-bottom:60px">
            <img class="img-responsive" src="images/fineon.png" alt="Fineon"> </div>





<style>
        .navbar {
            display: none;
        }

        .navbar-primary {
            display: none;
        }




</style>


<div ng-controller="login-controller" ng-init="initLoginPage()">
    <div align="center">{{message}}</div>

    <form class="login-form form">

            <p class="form-login-title" dir="{{pageInfo.direction}}">{{gs("signIn", "Sign in")}}</p>
            <hr style="margin-right:370px;border: 1px solid black;" width="15%">

            <div class="form-field">
                    <input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.email">
                    <label for="first_name">{{gs("emailAddress", "Email Address")}}</label>
                </div>


                <div class="form-field">
                        <input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.password">
                        <label for="first_name">{{gs("password", "Password")}}</label>
                    </div>


 <button  ng-disabled="crisperSessionId == undefined" dir="{{pageInfo.direction}}" ng-click="login()" 
  type="submit">{{gs("signInButton", "Sign in")}}</button>

                    <p class="Forgot-Password"><a class="Forgot-Password" href="#/loginForgot">Forgot my password</a></p>


    </form>
</div> 


    </div>


    <div class="split right ">
        <div class="centered">
            <h4 class="Fineon-Exchange">Fineon</h4> <br>
            <p class="Export-Receivable-Finance-Marketplace" >Trade Finance & Marketplace</p>

            <div style="width:70px; margin-top:50px">
                <hr style="border: 1px solid white;">
            </div>

        </div>
    </div>



</div>

Answer 1

虽然我不是一个核心程序员或任何专家，但我想我知道可能是错的。浏览器的Inspect Element以1366x768分辨率显示您的页面。而在笔记本电脑上，您实际上是在1366-（顶部和底部工具栏像素）x 768-（滚动条宽度像素）分辨率下查看页面。因此，笔记本电脑的分辨率为1366x768，但实际可显示分辨率低于此值，在我看来，问题就在于此。

现在，您可以从笔记本电脑获得实际的可显示分辨率，并在Chrome检测工具中设置为自定义分辨率，或者在笔记本电脑上按f11以实际1366x768分辨率查看该页面。