Различные версии android, различный дисплей

Question

Я создал мобильное приложение с использованием ионного каркаса. Он состоит из многих 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 
} 

Различные версии андроида шоу дизайн по-разному, Как решить проблему?

Answer 1

Различные версии Android имеют разные WebView, с разной поддержкой HTML/CSS. Например, svg поддерживается только частично до Android 4.4.

К сожалению, только с Android 4.4 можно использовать remote debug ваше приложение с Chrome.

Проверьте вручную, какие свойства css не работают в разных версиях Android, затем попробуйте найти обходной путь (поиск и запрос здесь).

Answer 2

Посетите ссылку ниже, вы можете получить больше идей о Android Размеры экрана от него:

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