将设计与 iphone4 & iphone 相匹配 5
match the design to iphone4 & iphone 5
我无法将按钮与 iphone 4 和 iphone 5 匹配。
所有其他平台设计的手机看起来都不错且反应灵敏，但只有 iphone 4 & 5 有点奇怪。
正如您在 nexus、galaxy 和 iphone 6 中看到的那样，它看起来不错
但在 iphone 4 中，我需要向下滚动，忘记密码和创建帐户是另一个。
<div class="popup popup-login modal-{{popupLogin}}" style="display: block;background:transparent">
<div class="content-block" >
<div class="login-view-box page page-login-wrapper" style="background:transparent;background:#009688">
<div class="text-center" >
<div class="logo sd" ></div>
<div class="company-text">company name</div>
</div>
<div class="list login-form-box">
<form name="loginForm"
novalidate ="novalidate"
ng-submit="loginForm.$valid && performLogin()" style="margin:20px auto;">
<label class="item item-input" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
fill="#000000"></path>
</svg>
<input type="email" placeholder="Email" name="email" ng-model="email" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
<div ng-message="email">{{ClientMessages.InvalidEmailInput}}</div>
</div>
<br />
<label class="item item-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"
fill="#000000"></path>
</svg>
<input type="password" placeholder="Password" name="password" ng-model="password" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
</div>
<button type="submit"
class="button button-block button-positive"
id="login-button"
ng-click="loginSubmit()"
<i class="icon ion-loading-c"></i>
<span>Sign In</span>
</button>
<div class="item item-input list-block" style="background-color:transparent;border:0;margin-top:8px;" ng-click="toggleStayLoggedCheck();" >
<label class="label-checkbox">
<input type="checkbox" name="stayLoggedCheckbox" ng-model="stayLoggedCheckbox" value="StayLogged" >
<div class="item-media" style="padding-left:20%">
<i class="icon icon-form-checkbox" style="border-radius:0"></i>
<span style="padding-left:10px;color:white">Stay Logged In</span>
</div>
</label>
</div>
</form>
<button class="button btn-account">
<a href="#" class="open-popup" data-popup=".popup-register">Create an account </a>
</button>
</div>
<!-- <a href="#" class="button button-big">Big Button </a>-->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
</div>
</div>
</div>
问题区域
<button class="button btn-account">
<a href="#" class="open-popup" data-popup=".popup-register">Create an account </a>
</button>
</div>
<!-- <a href="#" class="button button-big">Big Button </a>-->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o SAMGray-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
我会尝试切换位置属性。绝对定位时，父级应为 "position:relative"。当您在 Chrome 的移动欺骗器中调整大小时，它会将绝对定位的项目向上推到其他内容中。当您欺骗视图时，它不会模仿任何其他规格，只是模仿视图尺寸。希望这对您有所帮助！
<div class="text-center crt" style="position: relative;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position: absolute;"></span>
</div>
你的 class .footer-link 有 position: absolute 和 bottom: 0 属性吗？
我建议创建如下所示的媒体查询，以针对 iPhone 4 和 5。
@media only screen and (max-width: 320px) {
/* your iphone 4 & 5 styles */
}
然后，将您的 .footer-link class 切换为 position: relative（也许 float: left，具体取决于您其他方块的浮动）。
最终代码应如下所示：
@media only screen and (max-width: 320px) {
.footer-link {
position: relative;
/* float: left; if needed */
}
}
这应该将 "forgot password" 和 fab 定位在 "create account" 按钮下方，同时应用 margin-top: 20px，这在 absolute 定位中是无用的。
您必须滚动视图才能看到 "forgot password" link。因此，您可能希望向媒体查询添加更多样式，以减少一些边距、填充或字体大小，从而获得所需的视图。
但是，在这种布局中，您的 fab link 会变得一团糟。因为它的绝对定位是相对于 .footer-link。我建议您将它移到页脚之外（例如，就在 </body> 标记之前）。
希望对您有所帮助！
我无法将按钮与 iphone 4 和 iphone 5 匹配。 所有其他平台设计的手机看起来都不错且反应灵敏，但只有 iphone 4 & 5 有点奇怪。
正如您在 nexus、galaxy 和 iphone 6 中看到的那样，它看起来不错
但在 iphone 4 中，我需要向下滚动，忘记密码和创建帐户是另一个。
<div class="popup popup-login modal-{{popupLogin}}" style="display: block;background:transparent">
<div class="content-block" >
<div class="login-view-box page page-login-wrapper" style="background:transparent;background:#009688">
<div class="text-center" >
<div class="logo sd" ></div>
<div class="company-text">company name</div>
</div>
<div class="list login-form-box">
<form name="loginForm"
novalidate ="novalidate"
ng-submit="loginForm.$valid && performLogin()" style="margin:20px auto;">
<label class="item item-input" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
fill="#000000"></path>
</svg>
<input type="email" placeholder="Email" name="email" ng-model="email" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
<div ng-message="email">{{ClientMessages.InvalidEmailInput}}</div>
</div>
<br />
<label class="item item-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"
fill="#000000"></path>
</svg>
<input type="password" placeholder="Password" name="password" ng-model="password" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
</div>
<button type="submit"
class="button button-block button-positive"
id="login-button"
ng-click="loginSubmit()"
<i class="icon ion-loading-c"></i>
<span>Sign In</span>
</button>
<div class="item item-input list-block" style="background-color:transparent;border:0;margin-top:8px;" ng-click="toggleStayLoggedCheck();" >
<label class="label-checkbox">
<input type="checkbox" name="stayLoggedCheckbox" ng-model="stayLoggedCheckbox" value="StayLogged" >
<div class="item-media" style="padding-left:20%">
<i class="icon icon-form-checkbox" style="border-radius:0"></i>
<span style="padding-left:10px;color:white">Stay Logged In</span>
</div>
</label>
</div>
</form>
<button class="button btn-account">
<a href="#" class="open-popup" data-popup=".popup-register">Create an account </a>
</button>
</div>
<!-- <a href="#" class="button button-big">Big Button </a>-->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
</div>
</div>
</div>
问题区域
<button class="button btn-account">
<a href="#" class="open-popup" data-popup=".popup-register">Create an account </a>
</button>
</div>
<!-- <a href="#" class="button button-big">Big Button </a>-->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o SAMGray-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
我会尝试切换位置属性。绝对定位时，父级应为 "position:relative"。当您在 Chrome 的移动欺骗器中调整大小时，它会将绝对定位的项目向上推到其他内容中。当您欺骗视图时，它不会模仿任何其他规格，只是模仿视图尺寸。希望这对您有所帮助！
<div class="text-center crt" style="position: relative;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position: absolute;"></span>
</div>
你的 class .footer-link 有 position: absolute 和 bottom: 0 属性吗？
我建议创建如下所示的媒体查询，以针对 iPhone 4 和 5。
@media only screen and (max-width: 320px) {
/* your iphone 4 & 5 styles */
}
然后，将您的 .footer-link class 切换为 position: relative（也许 float: left，具体取决于您其他方块的浮动）。
最终代码应如下所示：
@media only screen and (max-width: 320px) {
.footer-link {
position: relative;
/* float: left; if needed */
}
}
这应该将 "forgot password" 和 fab 定位在 "create account" 按钮下方，同时应用 margin-top: 20px，这在 absolute 定位中是无用的。
您必须滚动视图才能看到 "forgot password" link。因此，您可能希望向媒体查询添加更多样式，以减少一些边距、填充或字体大小，从而获得所需的视图。
但是，在这种布局中，您的 fab link 会变得一团糟。因为它的绝对定位是相对于 .footer-link。我建议您将它移到页脚之外（例如，就在 </body> 标记之前）。
希望对您有所帮助！