不同版本的android，不同的显示

Question

我使用 ionic 框架创建了一个移动应用程序。它由许多html页面组成。对于 android 版本 KitKat，页面显示正确。对于 android 版本 Jellybean，页面显示不同。请看html&css代码？

Login.html

<ion-view hide-nav-bar="true ">
    <ion-content scroll="false">
        <div class="row" style="padding:29px">
            <div class="col">
                <div class="text-center">
                    <h1 class="text-font-white">Welcome</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="line-white"></div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="input" placeholder="{{user}}">
                </input>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <input class="input" type="password" placeholder="{{password}}">
                </input>
            </div>
        </div>
        <div class="row" style="padding:30px 0">
            <div class="col">
                <button type=submit id="login-btn" ng-click="doLogin()"></button>
            </div>
        </div>
        <div class="row" style="padding:2px 0">
            <div class="col">
                <button type=submit class="btn-white" ng-click="openRegistration()">Register your account</button>
            </div>
        </div>
        <div class="row" style="padding:34px 0">
            <div class="col">
                <div class="item item-image" id="logo">
                    <img src="img/logo.png">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="text-center">
                    <h4>Forgot password?
                <span><a href="#/forgetpwd" style="text-decoration:none;color:white">
                      Recover it</a></span>
                    </h4>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

style.css [我已经包含了与 Log.html 页面相关的样式]

ion-view {
    background-image: url("../img/bg.png") !important;
    background-repeat: no-repeat;
    background-size: cover
}
.text-font-white {
    color: white;
}
.text-font-white {
    color: white;
}
.line-white {
    width: 100%;
    background-image: url("../img/title_line_white.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 20px
}
.input {
    width: 97%;
    background: white;
    border-radius: 20px;
    border: 2px solid rgba(256, 256, 256, .4);
    padding: 4px;
    font-family: 'Lato-Black';
}
#login-btn {
    width: 97%;
    background: transparent;
    border-radius: 20px;
    border: 2px solid rgba(256, 256, 256, .4);
    padding: 14px;
    background-image: url("../img/icon_key.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}

#logo {
    background-color: transparent;
    border-width: 0
}

不同版本的android显示设计不同，如何解决？

Answer 1

不同的Android版本有不同的WebView，对html/css的支持也不同。例如，svg 在 android 4.4 之前仅部分支持。

不幸的是，只有从 Android 4.4 开始，才能使用 Chrome remote debug 您的应用程序。

手动检查不同 Android 版本中哪些 css 属性失败，然后尝试找到解决方法（在此处搜索并询问）。

Answer 2

访问下面的链接，您可以从中获得更多关于 Android 屏幕尺寸的想法：

http://developer.android.com/guide/practices/screens_support.html