Ionic android 和 ios CSS 问题

Question

我在 android 的 ionic 应用程序中遇到 CSS 问题。 问题是 CSS 在 Android 手机中不起作用。 例如）当我在三星 Galaxy S5 中执行时，css 工作正常（参见屏幕截图 1）。 但是当我执行 Samsung Galaxy Note 2 时，它无法正常工作（屏幕截图 2）。

你可以看到这两张截图，你会发现背景图片大小不同，标签边距也不一样。 为什么会出现这个问题？ 有人说这与安卓网络浏览器有关。所以我添加了“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;
}

Answer 1

这很可能与您的安卓版本有关。从 Android 4.4.3 开始，webview 组件有了很大的升级，支持更多的 CSS 和 HTML 选项。更多关于here的信息。

使用自定义 CSS 时，您最好的选择是将应用限制为 API 级别 19 或更高级别。通过这种方式，您仍然可以定位 75% 的设备。

Answer 2

这可能是由于 css 属性背景大小：封面。根据 w3schools(http://www.w3schools.com/cssref/css3_pr_background-size.asp)， background-size:cover 将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。并且背景图像的某些部分可能不在背景定位区域内。

所以不要使用 background-size:cover，而是使用“background-size:100% 100%;”设置全尺寸背景。