IOS iphone 6 屏幕和小字体大小答案

【问题标题】：IOS iphone 6 screen and tiny Font sizesIOS iphone 6 屏幕和小字体大小
【发布时间】：2021-06-05 18:16:50
【问题描述】：

谁能指导我如何正确管理移动设备上的字体。

目前我的字体大小是 PX。我也在使用媒体查询。在 dektop 上看起来很棒，页面响应迅速，字体在小屏幕上放大。

但是在 Iphone 6 上，屏幕不会进入响应状态，因为屏幕尺寸为 1200px +，因此很遗憾字体仍然非常小。

我不知道如何进一步解决这个问题。因为我为补偿 iphone 上的字体大小所做的任何尝试在桌面上都会大大放大。

iv 做了尽可能多的研究，包括使用其他字体大小的方法 - 即 VW 、 Rem 、 EM 等，所有这些都未能在 iphone 上产生一致、可读的字体。

我会列出代码，但目前代码太多了，所以我会尽力提供。

任何帮助将不胜感激。

这是顶部横幅的代码。

HTML：

<body>

    <div class='maindiv'> 

        <?php 
        //TOP BANNER
        include('../../innerelements/topbanner/html/topbanner.php');
        
        //LOGO & SEARCH BAR
        include('../../innerelements/Searchbar/html/searchbar.php');
        
        
        ?>
    
    </div>
    
</body>

PHP 包含的文件 - Topbanner.php

<div class='topbanner'>
        
        <div id='leftmenu' class='leftmenu'>
            <div class='leftmenuinnername' >Hello  <text class='accountname'> matthew </text> </div>
            <div class='leftmenuinner' >Daily Deals</div>
            <div class='leftmenuinner' >Brand Outlet</div>
            <div class='leftmenuinner' >Help & Contact</div>
        </div>
        
        
        <div id='rightmenu' class='rightmenu'>
            <div class='rightmenuinner' >Sell</div>
            <div class='rightmenuinner' >Watch List</div>
            <div class='rightmenuinner' >My Vbay</div>
            <div class='rightmenuinner' ><div class='bellicon'></div></div>
            <div class='rightmenuinner' ><div class='carticon'></div></div>
        </div>
        
</div>

CSS：

body{
-webkit-text-size-adjust: 100%;
padding:0px;
margin:0px;

}


.maindiv{
    position: absolute;
    width:100%;
    height:100%;
    padding: 0px 0px 0px 0px;
    MIN-WIDTH: 600px;
    display: block;
}
.topbanner{
    position: relative;
    width: auto;
    height: auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    font-family: "Helvetica Neue",Helvetica,Arial,Verdana,Sans-serif !important;
    font-size: 100%;
    border-bottom: 1px solid lightgrey;
    text-align: left;
    text-size-adjust: 100%;
    white-space: nowrap;
    /* line-height:14px; */
}

.accountname{
    font-weight:bold;
    margin-right: 36px;
    overflow: hidden;
}

.leftmenu{
    position: relative;
    width: auto;
    height: auto;
    padding: 6px;
    margin-left: 8px;
    margin-right: 4px;
    display: flex;
    line-height: 20px;
}

.leftmenuinner{
    height: auto;
    padding: 0px 4px 0px 4px;
    margin-left: 6px;
    margin-right: 6px;
    overflow: hidden;
    word-break: keep-all;
}

  .leftmenuinnername{
    height: auto;
    padding: 0px 4px 0px 4px;
    margin-left: 6px;
    margin-right: 6px;
    overflow: hidden;
    word-break: keep-all;
    }

.leftmenuinner:hover{
color:dodgerblue;
}


.rightmenu{
    /* right: 0px; */
    position: relative;
    width: auto;
    height: auto;
    padding: 6px;
    margin-left: 4px;
    margin-right: 18px;
    display: flex;
    line-height: 20px;
}
 
.rightmenuinner{
    padding: 0px 4px 0px 4px;
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
    height: auto;
}


.rightmenuinner:hover{
color:dodgerblue;
}


.bellicon{
    position: relative;
    min-width: 20px;
    width: 100%;
    min-height: 20px;
    height: 100%;
    background-image: url(../assets/icons/bellicon.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0;
}

.bellicon:hover{
    background-image: url('../assets/icons/belliconhover.png');

}




.carticon{
    position:relative;
    min-width: 20px;
    width: 100%;
    min-height: 20px;
    height: 100%;
    background-image: url('../assets/icons/carticon.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0;
}

.carticon:hover{
    background-image: url('../assets/icons/carticonhover.png');

}




@media screen and (max-width: 800px) {
  
  .topbanner{
    font-size:300%;
    justify-content: space-between;
    }
  
  
  .leftmenuinner{
  display:none;
  }
  
   .leftmenuinnername{
    float:left;
    line-height: 30px;
    }
  
  .rightmenuinner{
     min-width: 30px;
     min-height: 30px;
     line-height: 30px;
     }
  
  .vbaylogo{
      display:none;
  }
  
  .searchcontainer{
      font-size:20px;
      margin-left:0px;
  }
  
  
  .catagory1{
      
  }
  
  
  .searchbutton{
     font-size:20px;  
  }
  
  
  select{
      font-size:20px;
  }
  
  .searchbarinput{
      font-size:20px;
  }
  
  
  
}

如果 any1 可以帮助我，我会很高兴的。

谢谢。

【问题讨论】：

您的元标签是什么样的？另外，你为什么不在 html 标签上设置 font-size: 100% ，然后在 body 上设置字体大小？这些设置默认字体大小，然后您可以在其余样式中使用“继承”来引用它们，以便保留级联。

标签： html css ios fonts

【解决方案1】：

在你的脑海中使用这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0">.

这为浏览器提供了有关如何控制页面尺寸和缩放的说明。

【讨论】：

@ShaneDee 嘿，我很高兴它成功了！如果您想向其他用户展示他们必须这样做才能解决他们的问题，您可以点击投票旁边的勾号！祝你今天过得愉快！ :)