Question

我正在开发一款Android应用程序，它使用ionic作为UI部分;当我在不同的设备上查看我的应用程序时，会出现一些CSS问题。这里和现在我有两个平板电脑： 1-联想TAB2，屏幕尺寸为9.43英寸，160 dpi，屏幕分辨率为1280 x 800。 2-a联想创意标签，屏幕尺寸为10.1英寸，149 dpi，屏幕分辨率为800 x 1280像素。

我的应用程序在构思选项卡上看起来很漂亮。但是当谈到TAB2时，图标的font-size看起来更大 - 即使它们收到相同的样式并且我在chrome:inspect中确认了这一点 - 并且文本部分也会发生同样的事情太。例如，在第一页上，当我查看chrome:inspect时，所有图标都有font-size:190px;，但它们在TAB2上看起来更大，并且所有图标都浮动到其容器的左侧按钮部分。

这与我的平板电脑有什么关系吗？分辨率和屏幕尺寸？我在这里缺少什么重要的东西？

提前致谢。

P.S。：如果它会有所帮助，我最后添加了我的第一页代码。

<ion-content level-ionside-shifter>
        <div class="home-container"
             ng-class="{'compact' : (CompactValue == 1), 'fa-font r2l' : (TranslationValue == 1)}">
            <ion-slide-box on-slide-changed="slideHasChanged($index)" class="slider-content"
                           >
                <ion-slide>
                    <div class="row">
                        <div class="col col-20 scale-hover">
                            <div class="home-btn color-a" ui-sref="app.factories">
                                <i class="icon icon-diagnostic"></i>
                                <span>{{"D_DIAGNOSTICS" | translate}}</span>
                            </div>
                        </div>

                        <div class="col col-20 scale-hover">
                            <div class="home-btn color-b" ng-click="goToBTPage()">
                                <i class="icon icon-vci"></i>
                                <span>{{"D_VCI" | translate}}</span>
                            </div>
                        </div>

                        <div class="col col-20 scale-hover">
                            <div class="home-btn color-c" ng-click="goToUpdatePage()">
                                <i class="icon icon-update"></i>  
                                <span>{{"D_UPDATE" | translate}}</span>
                            </div>
                        </div>
                    </div>

                </ion-slide>

            </ion-slide-box>
        </div>
    </ion-content>

这就是css的编写方式：

   .home-container {
  .slider-slides {
    left: 650px;
  }
  clear: both;
  box-decoration-break: clone;
  height: 100%;
  .slider {
    display: flex;
    -webkit-flex-direction: column;
    -webkit-align-items: center;
    -webkit-justify-content: center;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding-bottom: 8%;
    clear: both;

  }
  .slider-slides {
    height: initial;
  }
  .slider-pager {
    #{$position-inverse}: 0;
    bottom: 75px;
  }
  .col {
    position: relative;
  }
  .row {
    display: flex;
    padding: 5px;
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
  }
  .row-2 {
    padding-top: 4%;
  }
  .col-offset-r {
    margin-right: 0;
  }
  .col-offset-l {
    margin-left: 0;
  }
  .slider-pager .slider-pager-page {
    color: #6b69a5;
  }
  .home-btn {
    position: relative;
    display: block;
    background: $color-f;
    text-align: center;
    width: 130px;
    height: 130px;
    margin: auto;
    border-radius: 15px;
    box-shadow: 0 4px 0 darken($color-f, 17%);
    @include transition(0s);
    span {
      position: absolute;
      display: block;
      margin: auto;
      width: 140%;
      margin-left: -20%;
      margin-right: -20%;
      bottom: -35px;
      color: #fff;
      text-shadow: 0 2px 3px #000;
      cursor: default;
      //font-size: 1.2em;
      @if $font_choice == 1{
        font-size: $font_mainMenu_small;
    }
      @if $font_choice == 2{
        font-size:$font_mainMenu_middle;
      }
      @if $font_choice == 3{
        font-size:$font_mainMenu_large;
      }
    }
    i {
      position: absolute;
      display: block;
      width: 130px;
      height: 130px;

      margin: auto;
      text-align: center;
      vertical-align: middle;
      font-size: 130px;
      color: #fff;
      &:before{
        margin-left: -100%;
        margin-right: -100%;
        top:-50%;
      }
    }

    em {
      position: absolute;
      display: block;
      top: -10px;
      right: -10px;
      font-style: normal;
      text-align: center;
      color: $color-c;
      background: #fff;
      padding: 8px 10px;
      border-radius: 50%;
      min-width: 36px;
      box-shadow: 0 0 7px darken($color-c, 17%);
    }
    &.color-a {
      background: $color-a;
      box-shadow: 0 4px 0 darken($color-a, 17%);
    }
    &.color-b {
      background: $color-b;
      box-shadow: 0 4px 0 darken($color-b, 17%);
    }
    &.color-c {
      background: $color-c;
      box-shadow: 0 4px 0 darken($color-c, 17%);
    }
    &.color-d {
      background: $color-d;
      box-shadow: 0 4px 0 darken($color-d, 17%);
    }
    &.color-e {
      background: $color-e;
      box-shadow: 0 4px 0 darken($color-e, 17%);
    }
    &.color-f {
      background: $color-f;
      box-shadow: 0 4px 0 darken($color-f, 17%);
      i {
        color: #505258;
      }
    }
    &:active, &:focus {
      transform: scale(0.9) !important;
      -webkit-transform: scale(0.9) !important;
    }
    &.hover {
      transform: scale(0.9) !important;
    }
  }
}

P.P.S：我在index.html上的meta标签是这样的：

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

Answer 1

您可以尝试减少设备字体大小settings > display > font size。

IONIC字体大小在不同设备中看起来不同

1 个答案: