我正在处理登录页面。对于台式机和笔记本电脑设备来说，一切都很好。在移动设备中，不同的移动设备看起来有点不同。例如，在iPhone 12 Pro上，设计看起来不错，但在iPhone XR上，它看起来不太好，例如输入字段向左移动，输入字段与屏幕大小相比更小。我有以下css和html代码：
.logo {
background: url('../images/logo_readpeak.png') no-repeat;
height: 109px;
width: 247px;
margin-bottom: 20px;
}
.bg {
background: linear-gradient(270deg, #00000000 60%, #000000ad 100%),
linear-gradient(90deg, #00000000 60%, #000000ad 100%),
url('../images/background_photo.jpeg') transparent 0% 0% no-repeat padding-box;
width: 100%;
min-height: 100vh;
background-position: center;
background-size: cover;
opacity: 1;
}
@media only screen and (min-width: 992px) {
.form-container {
margin-left: 33%;
margin-top: 23%;
}
.news-container {
margin-left: 14%;
margin-top: 23%;
max-width: 35em;
}
.input-width {
width: 350px;
}
.desktop-forget-password {
display: block !important;
}
}
@media only screen and (max-width: 990px) {
.mt-40 {
margin-top: 40px;
}
.mobile-forget-password {
display: block !important;
}
.input-container {
display: -ms-flexbox;
display: flex;
width: 100px;
}
.news-container {
margin-bottom: 30px;
}
.input-width {
width: 320px;
}
}
@media only screen and (max-width: 400px) {
.input-width {
width: 270px;
}
.new-login-form {
margin: 25px;
}
}
@media only screen and (min-width: 1800px) {
.mt-40 {
margin-top: 30%;
}
.form-container {
margin-left: 32%;
}
.news-container {
width: 570px;
margin-left: 183px;
}
.input-width {
width: 450px;
}
}
.form-label {
font: normal normal 20px/30px Raleway;
letter-spacing: 0px;
color: #ffffff;
opacity: 1;
}
.login-btn {
text-align: left;
font: normal normal medium 20px/24px Raleway;
letter-spacing: 0px;
color: #ffffff;
background-color: #599da6;
padding: 5px 20px 5px 20px;
border: none;
margin-top: 20px;
}
.login-btn:hover {
background-color: #599da6;
border: 1px solid white;
}
.ml-5 {
margin-left: 5px;
}
.input-container {
display: -ms-flexbox;
display: flex;
width: 100%;
min-width: 100%;
margin-bottom: 15px;
}
.no-border {
border: none;
outline: none;
border-radius: 0px;
}
.news-container {
background: #599da6 0% 0% no-repeat padding-box;
border-radius: 15px;
padding: 15px;
}
.news-heading {
font: normal normal bold 26px/35px Raleway;
letter-spacing: 0px;
color: #ffffff;
}
.news-tile-container {
padding: 15px 0px 15px 0px;
border-bottom: 1px solid white;
}
.news-title {
text-align: left;
font: normal normal normal 17px/24px Raleway;
letter-spacing: 0px;
color: #ffffff;
}
.news-link {
text-decoration: none;
font: normal normal normal 17px/24px Raleway;
letter-spacing: 0px;
color: #ffffff;
}
.forgot-password-container {
position: absolute;
bottom: 45px;
left: 45px;
}
.icon {
padding: 10px;
background: white;
color: gray;
min-width: 35px;
text-align: center;
}
.forget-password-h {
font: normal normal bold 22px/24px Raleway;
letter-spacing: 0px;
color: #589da6;
}
.forget-password-p {
color: white;
text-align: left;
font: normal normal normal 18px/24px Raleway;
letter-spacing: 0px;
margin-top: 20px;
}
.forget-password-l {
color: #589da6;
text-decoration: none;
font: normal normal bold 20px/24px Raleway;
}
.desktop-forget-password {
display: none;
}
.mobile-forget-password {
display: none;
margin-top: 45px;
margin-left: 25px;
margin-right: 25px;
}
@media all and (max-height: 600px) {
.bg {
min-height: 100%;
}
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Raleway:ital,wght@0,300;0,800;1,200&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/newlogin.css">
<title>Login Page</title>
<style>
</style>
</head>
<body class="bg">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 col-size">
<!-- FORM START HERE -->
<?php echo $this->Form->create('User', array(
'url' => array('controller' => 'users', 'action' => 'newlogin'), 'method' => 'POST', 'class' => 'new-login-form form-container mt-40',
'id' => 'new-login-form'
)); ?>
<div class="logo"></div>
<?php if (isset($error) && $error == "wrong,"): ?>
<div class="alert alert-danger <?php if (empty($error)): ?>display-hide<?php endif; ?>">
<button class="close" data-close="alert"></button>
<span>Incorrect username or password. Please use your email address as the username</span>
</div>
<?php endif; ?>
<div class="form-group input-thing">
<label for="exampleInputEmail1" class="form-label">Work Email Address</label>
<div class="input-container">
<i class="fa fa-user icon"></i>
<?php echo $this->Form->input('username', array('label' => '', 'class'=>"form-control input-width no-border input-new-login pull-left", 'type' => 'text', 'placeholder' => 'E-Mail Address')); ?>
<!--<input type="email" class="form-control input-width no-border" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">-->
</div>
</div>
<div class="form-group input-thing">
<label for="exampleInputPassword1" class="form-label">Password</label>
<div class="input-container">
<i class="fa fa-lock icon" aria-hidden="true"></i>
<?php echo $this->Form->input('password', array('label' => '', 'class'=>"form-control input-width no-border input-new-login pull-left", 'type' => 'text', 'type' => 'password', 'placeholder' => 'Password')); ?>
<!--<input type="password" class="form-control input-width no-border" id="exampleInputPassword1" placeholder="Password">-->
</div>
</div>
<button type="submit" class="btn btn-primary login-btn">LOGIN <span class="ml-5"><i class="fa fa-sign-in" aria-hidden="true"></i></span></button>
<?php echo $this->Form->end(); ?>
<!-- FORM END HERE -->
<div class="mobile-forget-password">
<p href="/users/passwordRecovery" class="forget-password-h">Forgot Password?</p>
<div>
<p class="forget-password-p">Don’t have a Readpeak account yet?</p>
<a href="/signup" class="forget-password-l">Create one here</a>
</div>
</div>
</div>
<!-- <div class="col-md-2 col-sm-2 col-xs-12"></div> -->
<div class="col-md-6 col-sm-6 col-xs-12 col-size">
<div class="news-container mt-40">
<iframe src="https://app.readpeak.com/ads/get/?l=579f889b0cd477a5" id="mcn_iframe_579f889b0cd477a5-1" style="width: 100%; max-width: 600px; height: 400px; border: none;" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
<div class="forgot-password-container desktop-forget-password">
<a href="/users/passwordRecovery" class="forget-password-h">Forgot Password?</a>
<div>
<p class="forget-password-p">Don’t have a Readpeak account yet?</p>
<a href="/signup" class="forget-password-l">Create one here</a>
</div>
</div>
</div>
</body>
</html>对于iPhone 12 Pro，它看起来像这样，这是好的。输入字段，忘记密码，新闻&更新是一致的。
对于iPhone XR，它看起来像下面的图片，这是不好的。输入字段，忘记密码，新闻&更新文本不在同一行。
有人能告诉我如何修复它，使其在所有移动设备中看起来都一样吗？iPhone 12 Pro中的外观如何？我在这个问题上纠结了很长时间。请帮帮我。
忘记密码区域有左右边距：
.mobile-forget-password {
display: none;
margin-top: 45px;
margin-left: 25px;
margin-right: 25px;
}
从.mobile-forget-passwordCSS类中删除这些页边距，或者向要对齐的其他元素添加相同的左/右页边距。