iOS Safari图片溢出问题：原因排查与解决方案

问题代码 #

<!DOCTYPE html>
<html lang="en">

<body style="
    box-sizing: border-box;
    max-width: 100vw;
">
    <main style="width: 60%; margin: 0 auto;">
        <h1>Title</h1>
        <img style="width: 100%; height: auto;"
             src="https://images.unsplash.com/photo-1513622790541-eaa84d356909?q=40&w=1974&auto=format&fit=crop"
             width="1974" height="1481" alt="">
    </main>
    <span>Something else</span>
</body>

</html>

预期布局需求 #

• body宽度锁定为100视口单位
• 内部块级元素main宽度为父元素的60%并居中
• 内部图片占满main宽度，自动高度保持宽高比

问题现象 #

该布局在桌面端显示正常，但在iOS Safari中图片会溢出页面并出现横向滚动条。

原因分析 #

• body默认margin导致宽度溢出：浏览器默认给body设置了margin: 8px，你给body设置的max-width: 100vw不会包含margin，因此body的总宽度会是100vw + 16px（左右margin之和），直接超出视口范围。
• iOS Safari对vw单位的特殊处理：在iOS Safari中，100vw的计算包含了垂直滚动条的宽度，但页面实际可用宽度是视口宽度减去滚动条宽度，这会导致容器宽度计算偏差，进而使图片溢出。
• 图片原生尺寸的潜在影响：图片自带的width和height属性可能在iOS浏览器中触发最小尺寸规则，即使你设置了width: 100%，也可能出现渲染偏差。

解决方案 #

优化后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 添加viewport标签确保移动端正确渲染 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 全局重置box-sizing，避免宽度计算偏差 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            /* 用width:100%替代100vw，自动适配视口可用宽度 */
            width: 100%;
            max-width: 100%;
        }
        main {
            width: 60%;
            margin: 0 auto;
        }
        img {
            /* 同时设置width和max-width，确保图片不会溢出容器 */
            width: 100%;
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <main>
        <h1>Title</h1>
        <img src="https://images.unsplash.com/photo-1513622790541-eaa84d356909?q=40&w=1974&auto=format&fit=crop"
             alt="示例图片">
    </main>
    <span>Something else</span>
</body>
</html>

关键优化点 #

• 添加viewport元标签：强制iOS Safari以设备宽度渲染页面，避免桌面端缩放逻辑导致的布局偏差。
• 全局重置margin和box-sizing：清除body默认margin，同时让所有元素继承border-box，确保宽度计算包含padding和border，避免溢出。
• 替换100vw为*width:100%*：width:100%会自动适配视口的可用宽度（不含滚动条），避免iOS Safari中vw单位的计算问题。
• 增强图片的溢出控制：同时设置width:100%和max-width:100%，彻底避免图片因原生尺寸或容器宽度偏差导致的溢出。

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