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

Posted 2023-05-06

【中文标题】IONIC 字体大小在不同设备中看起来不同

【英文标题】：IONIC font size looks different in different devices

【发布时间】：2017-12-24 11:31:03

【问题描述】：

我正在开发一个使用 ionic 作为 UI 部分的 android 应用；当我在不同的设备上查看我的应用程序时，会出现一些 CSS 问题。 现在我有两个平板电脑： 1- 一台联想 TAB2，屏幕尺寸为 9.43 英寸，160 dpi，屏幕分辨率为 1280 x 800。 2-一个联想idea-tab，屏幕尺寸为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 charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

【问题讨论】：

您是否在 index.html 中使用了任何元标记？

@SwapnilPatwa A...是的。它是这样的：

它与设备的像素密度有关。看看github.com/ionic-team/ionic/issues/1352 和***.com/questions/16390762/…

如果您尝试将 px 更改为 rem 或其他任何内容，请告诉我。

您也可以尝试减小设备字体大小。 setting>display>font size.

【参考方案1】：

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