html - Chrome 的检查设备非常不准确？

Question

我正在尝试查看该页面在 1366x768 笔记本电脑上的外观。

在 Inspect device 中它看起来非常好:

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

太离谱了! :-/当我在大屏幕上工作时，这非常令人沮丧，而且我不能每分钟都在笔记本电脑的小屏幕上查看它。

为什么页面在 1366x768 的 chrome 设备检查中完全适合，但在实际的 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 分辨率查看页面。