Блог

Я пытаюсь увидеть, как выглядит страница на ноутбуке 1366×768.

В Inspect device это выглядит совершенно нормально:

Но на самом ноутбуке это выглядит так:

Так далеко! :-/ Это очень расстраивает, поскольку я работаю на большом экране, и я не могу проверять его на маленьком экране ноутбука каждую минуту.

Как получается, что страница идеально подходит для проверки устройства Chrome 1366×768, но ужасно на реальном экране 1366×768?

Любой совет, что может происходить?

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 amp; Marketplace</p>

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

        </div>
    </div>



</div>
  

Хотя я не программист или какой-либо эксперт, но я думаю, что знаю, что может быть не так. Элемент проверки вашего браузера отображает вашу страницу в разрешении 1366×768. Принимая во внимание, что на ноутбуке вы фактически просматриваете страницу с разрешением 1366 (пиксели верхней и нижней панелей инструментов) x 768 (пиксели ширины полосы прокрутки). Итак, ноутбук имеет разрешение 1366×768, но фактическое отображаемое разрешение меньше, и, на мой взгляд, это проблема.

Теперь вы можете либо получить фактическое отображаемое разрешение с ноутбука и установить его в качестве пользовательского разрешения в инструменте проверки Chrome, либо нажать клавишу f11 на своем ноутбуке, чтобы просмотреть страницу в реальном разрешении 1366×768.