Question

我使用离子框架创建了一个移动应用程序。它由许多html页面组成。对于Android版 KitKat ，页面显示正确。对于Android版 Jellybean ，页面的显示方式不同。请参阅html＆amp; 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有不同的支持。例如，在android 4.4之前仅部分支持svg。

不幸的是，只有Android 4.4才能{/ 3}}您的Chrome应用程序。

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

Answer 2

访问以下链接，您可以从中获得有关Android屏幕尺寸的更多信息：

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

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

2 个答案: