Входной тег с атрибутом пароля меняет мобильный сайт на рабочий стол, когда сфокусирован

Question

Это простая форма с полем ввода адреса электронной почты и полем ввода пароля. Вы можете ввести свой адрес электронной почты без проблем, он сохраняет свой размер и не изменяется, за исключением небольшого изменения цвета фона ввода при фокусировке.

Это форма

Однако, если пароль сфокусирован, он изменяет мобильную версию этого сайта на настольную версию. Как только вы сосредоточитесь на чем-то другом, скажем, по электронной почте, сайт рабочего стола вернется к мобильной версии. Это не происходит на chrome DevTools. Проблема, кажется, только на мобильной версии chrome.

Здесь вы можете увидеть, что сайт изменился на настольную версию

Я думаю, что он имеет что-то делать с тем, как chrome обрабатывает атрибут «пароль». Как запретить chrome изменять мобильный сайт на рабочий стол и обратно только из-за пароля?

HTML

<form class="loginform" action="includes/login.inc.php" method="POST">
        <h1>Log-in</h1>
        <label for="userEmail">Email</label><br>
        <input name="userEmail" autocomplete="username" type="text" placeholder="Email"><br>
        <label for="userPwd">Wachtwoord</label><br>
        <input name="userPwd" type="password" autocomplete="current-password" placeholder="Wachtwoord">
        <br>
        <input name="onthoudtmij" type="checkbox"><label for="onthoudtmij" style="display: inline-block;">Onthoudt mij</label>
        <br>
        <input type="submit" name="submit" value="Log-in">
        <br>
        <br>
        <h1>Nog geen account? <a href="registreren.php">klik hier!</a></h1>
        <br>
        <a href="reset-wachtwoord.php">Wachtwoord vergeten? klik hier!</a>
    </form>

CSS

@media screen and (max-width: 425px) and (orientation: portrait)
input[type=text], input[type=password], input[type=email], input[type=tel] {
   width: auto;
}
input[type=text], input[type=password], input[type=email], input[type=tel] {
   width: 50%;
   padding: 12px 20px;
   margin: 8px 0;
   box-sizing: border-box;
   border: none;
   border-bottom: 2px solid #256578;
}
@media screen and (max-width: 425px) and (orientation: portrait)
p, li, h4, td, label, input, textarea {
   font-size: 4.5vw;
   padding: 0;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus {
   background-color: #c4c4c4;
}