Ionic android和ios CSS問題

我正面臨着Android中離子應用中CSS的問題。問題是，CSS在Android手機中不起作用。例如）當我在Samsung Galaxy S5中執行時，css工作正常（請參見屏幕截圖1）。但是當我執行三星Galaxy Note 2時，它不起作用（屏幕截圖2）。Ionic android和ios CSS問題

正如你可以看到這些2屏幕，你可以找到背景圖像的大小是不同的，也是利潤率的標籤不一樣的。爲什麼發生這個問題？有人說它與Android網頁瀏覽器有關。所以我添加了「crosswalker」插件來升級webview。但它是一樣的。我該如何解決這個問題？如果有人有經驗，請教我。

PS：所述的碼是如下下列： [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; 
}

來源

2016-04-05 Tim Rogers

這可能是由於CSS屬性背景尺寸：蓋。根據w3schools（http://www.w3schools.com/cssref/css3_pr_background-size.asp），background-size：cover將背景圖像縮放爲儘可能大，以使背景區域完全被背景圖像覆蓋。背景圖像的某些部分可能不在背景定位區域內。

因此，不是使用background-size：cover，而是使用「background-size：100％100％;」設置完整大小的背景。

來源

2016-04-05 04:45:58 Krunal

謝謝，但我該如何解決文字風格？ –

這可能是由於響應式設計，離子可能會根據設備大小設置不同的CSS文本對齊屬性。你可以設置「text-align：center！important;」爲文本框重寫離子css相同 – Krunal

@TimRogers是你的問題解決？ – Krunal

這很可能與您的Android版本有關。從Android 4.4.3開始，webview組件得到了很大的升級，支持更多的CSS和HTML選項。更多關於那here的信息。

使用自定義CSS時，最佳選擇是將應用限制在API級別19和更高級別。您仍然可以以這種方式瞄準75％的設備。

來源

2016-04-05 09:17:13

Ionic android和ios CSS問題

回答

相關問題