如何为 CSS 中的所有移动设备的输入字段制作相同的 alignment

Question

I am working on login page.我正在处理登录页面。 For desktop and laptop devices it looks all good.对于台式机和笔记本电脑设备，它看起来都很好。 In mobile devices, it looks bit different in different mobile device.在移动设备中，它在不同的移动设备中看起来有些不同。 For example, on iPhone 12 Pro the design looks good but on iPhone XR it doesn't look good eg input fields moved to the left, input fields are smaller compared to screen size.例如，在 iPhone 12 Pro 上，设计看起来不错，但在 iPhone XR 上看起来不太好，例如输入字段向左移动，输入字段与屏幕尺寸相比更小。 I have the following css and html code:我有以下 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>

For iPhone 12 Pro it look like this which is Alright.对于 iPhone 12 Pro，它看起来像这样，没关系。 The input fields, forgot password, news & update are in the same align.输入字段，忘记密码，新闻和更新都在同一对齐。

For iPhone XR it look like following image which is not alright.对于 iPhone XR，它看起来像下面的图像，这不太好。 The input fields, forgot password, news & update texts are not in the same align.输入字段、忘记密码、新闻和更新文本不一致。

Could anyone tell me how can I fix it so that look like same design in all mobile devices how it look like in iPhone 12 Pro?谁能告诉我如何修复它，以便在所有移动设备中看起来都像 iPhone 12 Pro 中的相同设计？ I am stuck on this for a long time.我被困在这个问题上很长时间了。 Please help me out.请帮帮我。

Answer 1

The forgot password area has left and right margins:忘记密码区域有左右边距：

.mobile-forget-password {
    display: none;
    margin-top: 45px;
    margin-left: 25px;
    margin-right: 25px;
}

Either remove those margins from .mobile-forget-password CSS class, or add the same left/right margins to the other elements that you want to align.从.mobile-forget-password CSS class 中删除这些边距，或者将相同的左/右边距添加到要对齐的其他元素。

如何为 CSS 中的所有移动设备的输入字段制作相同的 alignment

问题描述

1 个解决方案

解决方案1
0 2022-09-11 08:40:53

如何为 CSS 中的所有移动设备的输入字段制作相同的 alignment

问题描述

1 个解决方案

解决方案1 0 2022-09-11 08:40:53

解决方案1
0 2022-09-11 08:40:53