iOS设备（iPhone）CSS布局异常问题求助

同一代码在Android设备上CSS布局显示正常，但在iPhone等iOS设备上出现异常，部分区域存在多余空白甚至重叠，以下是对应的HTML及CSS代码，需调整代码实现iOS端兼容。

HTML代码 #

<!-- ABOUT US SECTION(GLIMPSE OF US) -->
<div class="about-section">
    <div class="about-us">
        <h1 class="about-web">A GLIMPSE<br>OF US</h1>
        <h1 class="about-mobile">A GLIMPSE OF US</h1>
        <div class="text-plus-pointers">
            <p class="about-us-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            <div class="adjectives">
                <h1 class="the-value">LOREM IPSUM</h1>
                <div class="frame14-list">
                    <div class="frame14"><img class="frame14-img" src="res/Check circle.png">
                        <h1 class="frame14-text">valueone</h1>
                    </div>
                    <div class="frame14"><img class="frame14-img" src="res/Check circle.png">
                        <h1 class="frame14-text">valuetwo</h1>
                    </div>
                    <div class="frame14"><img class="frame14-img" src="res/Check circle.png">
                        <h1 class="frame14-text">valuethree</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS代码（原代码） #

.about-web{
    display: none;
}
.about-section {
    background: #F5F5F5;
    height: 130.5vw;
}
.about-us{
    flex-direction: column;
    justify-content: center;
    align-self: center;
    gap: 6vw;
    height: fit-content;
    width: 88%;
}
.about-mobile{
    display: flex;
    padding: 0;
    margin: 0;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 600;
    font-size: 9vw;
    line-height: 100%;
    width: 100%;
    letter-spacing: -0.04em;
    color: #222222;
}
.text-plus-pointers{
    width: 100%;
    gap: 5vw;
}
.about-us-text{
    font-size: 3.5vw;
    height: fit-content;
    margin: 0;
    padding: 0;
}
.the-value{
    display: flex;
    width: 65%;
    height: 100%;
    font-size: 5.5vw;
    line-height: 6.2vw;
}
.adjectives{
    height: fit-content;
    align-items: flex-start;
    padding: 11vw 9vw 11vw 9vw;
    gap: 3vw;
}
.frame14-list{
    width: 100%;
    gap: 1vw;
}
.frame14{
    height: 8vw;
    gap: 3vw;
}
.frame14-img {
    width: 5.5vw;
    height: 5.5vw;
}
.frame14-text{
    font-size: 5.5vw;
} 

兼容调整方案 #

1. 补全Flex布局声明 #

多个容器类使用了flex-direction、gap等Flex属性，但未添加display: flex，iOS Safari不会解析未声明Flex容器的相关属性，这是布局错乱的核心原因。给以下类补充display: flex及必要的排列方向：

.about-us{
    display: flex; /* 新增 */
    flex-direction: column;
    justify-content: center;
    align-self: center;
    gap: 6vw;
    height: fit-content;
    width: 88%;
}
.text-plus-pointers{
    display: flex; /* 新增 */
    flex-direction: column; /* 新增，确保垂直排列 */
    width: 100%;
    gap: 5vw;
}
.adjectives{
    display: flex; /* 新增 */
    flex-direction: column; /* 新增 */
    height: fit-content;
    align-items: flex-start;
    padding: 11vw 9vw 11vw 9vw;
    gap: 3vw;
}
.frame14-list{
    display: flex; /* 新增 */
    flex-direction: column; /* 新增 */
    width: 100%;
    gap: 1vw;
}
.frame14{
    display: flex; /* 新增 */
    align-items: center; /* 新增，让图标与文字垂直居中 */
    height: 8vw;
    gap: 3vw;
}

2. 替换固定高度为自适应 #

.about-section设置的固定高度130.5vw会因iOS和Android的字体渲染差异（比如行高、字间距）导致内容溢出或空白，改用自适应高度：

.about-section {
    background: #F5F5F5;
    min-height: fit-content; /* 替换原固定height */
    padding: 6vw 0; /* 可选，增加上下内边距优化视觉效果 */
}

3. 字体兼容处理 #

添加字体 fallback，避免iOS Safari无法加载Roboto Condensed时使用系统默认字体导致布局偏移：

.about-mobile{
    /* 保留原属性 */
    font-family: 'Roboto Condensed', sans-serif; /* 新增sans-serif作为 fallback */
}

4. 图片渲染优化 #

iOS上图片默认的基线对齐可能产生多余空白，给图片添加display: block：

.frame14-img {
    display: block; /* 新增 */
    width: 5.5vw;
    height: 5.5vw;
}

内容的提问来源于stack exchange，提问作者Lilia