css - 使设计与 iphone4 和 iphone 5 相匹配

Question

我无法将按钮与 iphone 4 和 iphone 5 匹配。所有其他平台设计的手机看起来都不错且 react 灵敏，但只有 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>

Answer 1

有你的课.footer-link一个position: absolute和 bottom: 0属性什么的？

我建议创建一个如下所示的媒体查询，以针对 iPhone 4 和 5。

@media only screen and (max-width: 320px) {
    /* your iphone 4 & 5 styles */
}

然后，切换您的 .footer-link类别为 position: relative (可能还有 float: left ，这取决于您其他 block 的 float )。

最终代码应该是这样的:

@media only screen and (max-width: 320px) {
    .footer-link {
        position: relative;
        /* float: left; if needed */
    }
}

这应该将“忘记密码”和 fab 放在“创建帐户”按钮下方，同时应用 margin-top: 20px在 absolute 中没用定位。

不过，您必须 ScrollView 才能看到“忘记密码”链接。因此，您可能希望向媒体查询添加更多样式，以减少一些边距、填充或字体大小，从而获得所需的 View 。

但是，在这种布局中，您的 fab 链接会被弄乱。因为它的绝对定位是相对于 .footer-link 的.我建议您将它移到页脚之外(例如，就在 </body> 标记之前)。

希望这对您有所帮助!