2017-07-19 9 views
2

私は、UI用のイオン部分を使用するAndroidアプリで作業しています。私が別のデバイスで自分のアプリケーションを見るときに起こるCSSの問題がいくつかあります。 ここでは2つのタブレットがあります: 1-9.43インチの画面サイズ、160 dpi、1280 x 800の画面解像度を備えたLenovo TAB2 10.1インチの画面サイズ、149 dpi、画面解像度は800 x 1280ピクセルです。さまざまなデバイスでIONICのフォントサイズが異なって見える

私のアプリは、アイデアタブできれいに見えます。しかし、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; 
    } 
    } 
} 

PPS:index.htmlを上の私のメタタグは、次のように行く:

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

index.htmlにメタタグを使用していますか? –

+0

@SwapnilPatwa A ...はい。

+0

デバイスのピクセル密度に関連します。 https://github.com/ionic-team/ionic/issues/1352とhttps://stackoverflow.com/questions/16390762/css-html-dp-density-independent-unitsをご覧ください。 –

答えて

2

あなたは、デバイスフォントサイズsettings > display > font sizeを縮小してみてください。

関連する問題