探索 iOS 编码对包大小的影响

Posted 2022-02-16 字节跳动技术团队

动手点关注 干货不迷路 

为啥 flex 会影响 iOS 上的字体大小？

【中文标题】为啥 flex 会影响 iOS 上的字体大小？

【英文标题】：Why is flex affecting font size on iOS?为什么 flex 会影响 iOS 上的字体大小？

【发布时间】：2016-11-15 17:38:47

【问题描述】：

在确认在 Safari iOS 上使用 flexbox 时字体大小受到某种影响后，我感到非常震惊

iOS

桌面

代码

a 
    font-size: 14px;


a + a 
    margin-left: 1em;


.flex 
    display: flex;


.float > a 
    float: left;


.float:after 
    content: "";
    display: block;
    clear: both;

<div>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

<div class="flex">
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

<div class="float">
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
    <a href="#">hola</a>
    <a href="#">adios</a>
</div>

我在这里缺少什么？，这是一个错误吗？

【问题讨论】：

我认为这是一个错误，请使用CSS Reset 或CSS Normilize 修复此问题

嘿@AleshaOleg！好吧，我实际上正在使用 Eric Meyer 的重置，但无论如何，问题是如此模糊，以至于我无法从检查员那里看到差异。

检查了我的 iPhone 6 (iOS 9.3.3) - 一切都很好。 Here是图片。

不，@AleshaOleg，将第一行的字体大小与您自己屏幕截图上的第二行进行比较。

你在桌面下使用什么浏览器？顺便说一句，display: flex; 和 float: left 在我的例子中具有相同的效果

【参考方案1】：

因此，字体大小的问题出现在 flex 和 float 中：

https://***.com/a/22417120/94144

添加此修复它：

a 
    text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;