İyonik android ve ios CSS sorunu

Question

Android'de iyonik uygulama CSS bir sorunla karşı karşıya. Sorun şu ki, CSS Android telefonda çalışmıyor. Örneğin) Samsung Galaxy S5'de çalıştırdığımda css düzgün çalışıyor (Bkz. Ekran Görüntüsü 1). Ama Samsung Galaxy Note 2'yi çalıştırdığımda, çalışmıyor (Ekran 2).

bu 2 ekran görebileceğiniz gibi, arka plan görüntü boyutu farklıdır ve ayrıca etiket marjları aynı olmadığını bulabilirsiniz. Neden bu sorun oldu? Birisi bunun bir android web tarayıcısı ile ilgili olduğunu söyledi. Bu yüzden webview'i yükseltmek için "crosswalker" eklentisini ekledim. Ama aynıydı. Bu sorunu nasıl çözebilirim? Lütfen daha önce tecrübe edilmiş olan herhangi biri varsa bana öğretin.

Not: kodları aşağıda şunlardır: [html]

<ion-view view-title="Log_in" class="user_reg static-bg ionic"> 
    <ion-content scroll="false"> 
    <div class="login_form_container" layout="column" layout-align="" style="padding-top:65px;"> 
     <div class="signup_btn_back font-raleway" ng-click="backTo()"> 
     <i class="icon ion-chevron-left"></i> Back 
     </div> 
     <form class="reg_form" id="login_form" ng-submit="login_user(user)"> 
     <div layout="column" layout-align="left center" style="margin-bottom: 10px;"> 
      <div class="row"> 
      <a ng-click="show_forgot_pass_pop()" data-rel="popup" data-position-to="window" data-transition="pop" class="col col-67 reg_link form_txt"><label class="reg_link_font font-bold font-white font-raleway"> 
       Forgot password?</label></a> 

      <a ng-click="signup()" data-rel="popup" data-position-to="window" data-transition="pop" class="col reg_link form_txt" style="text-align:right;"><label class="reg_link_font font-bold font-white font-raleway"> 
       Sign Up</label></a> 
      </div> 
     </div> 
     <div class="textboxholder button-only-border"> 
      <div class="textboxcontainer"> 
      <input type="text" class="form form_text font-raleway" placeholder="Email Address" ng-model="user.email"> 
      </div> 
     </div> 
     <div class="textboxholder button-only-border"> 
      <div class="textboxcontainer"> 
      <input type="password" class="form form_text font-raleway" placeholder="Password" ng-model="user.password"> 
      </div> 
     </div>  
     <div layout="row" layout-align="center end"> 
      <button class="button button-common form_btn_cyan form_btn font-raleway" type="submit">Log In!</button> 
     </div> 
     </form> 
    </div> 
    </ion-content> 
</ion-view> 

[CSS]

.user_reg { 
    /*background-image: url('../img/sign_in_bg2.png');*/ 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 
.static-bg{ 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    background: url('../img/bg-static-onboard.jpg') no-repeat center center fixed; 
    background-size: cover !important; 
    width: 100%; 
    height: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.textboxholder{ 
    background-color: rgba(0,0,0,0.5); 
    border-width: 1px; 
    padding-top: 5px; 
} 
.button-only-border{ 
    background-color: rgba(0,0,0,0); 
    border: 1px solId #FFF; 
    padding-left: 7px; 
    padding-right: 7px; 
    margin-bottom: 10px; 
} 
.textboxcontainer{ 
     padding-bottom: 5px; 
} 
    background-color: rgba(0, 0 ,0, 0.5); 
    color: #FFF !important; 
    padding-left: 0px !important; 
    height: 50px !important; 
    width: 100%; 
    text-align: center; 
    font-size: 16px !important; 
    font-weight: bold; 
    padding-top: 5px !important; 
} 
.font-raleway{ 
    font-family: "Raleway" !important; 
} 

Answer 1

dolayı css özelliği background-boyutuna olabilir: kapak. W3schools (http://www.w3schools.com/cssref/css3_pr_background-size.asp) uyarınca, arka plan boyutu: kapak, arka plan resmini mümkün olduğunca büyük olacak şekilde ölçeklendirir; böylece arka plan alanı arka plan görüntüsü tarafından tamamen kaplanır. Arka plan görüntüsünün bazı bölümleri arka plan konumlandırma alanı içinde görünmeyebilir.

Arka plan boyutu kullanmak yerine, kapakta "arka plan boyutu:% 100% 100;" kullanın. Tam boyutta arka plan ayarlamak için.

Answer 2

Bunun büyük ihtimalle android sürümünüzle ilgili olması gerekir. Android 4.4.3'ten itibaren webview bileşeni, daha fazla CSS ve HTML seçeneğini destekleyen büyük bir yükseltmeye sahip. Bu konuda daha fazla bilgi here.

Özel CSS'yi kullanırken, en iyi seçeneğiniz, API düzey 19 ve üstü için uygulamayı sınırlamak olacaktır. Cihazların% 75'ini bu şekilde hedefleyebilirsiniz.