html - 具有密码属性的输入标签在聚焦时将移动站点更改为桌面

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;
}

标签： htmlcssinputpasswordsmobile-chrome