如何消除iPhone横屏模式下应用侧边的空白区域？

核心修复步骤： #

• 更新viewport元标签：添加viewport-fit=cover属性，让网页能够延伸至iPhone屏幕的边缘（包括刘海、圆角区域），这是解决横屏空白的关键。
• 确保根元素占满视口：给html和body设置width: 100vw、height: 100vh，同时清除默认的内外边距，保证根容器铺满整个屏幕。
• 调整内容元素宽高：避免给容器设置固定的width: 100%，改用width: 100vw或让元素自动继承父级宽度，确保内容能铺满屏幕。

修改后的完整代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 添加viewport-fit=cover，解决iPhone横屏空白 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Test document</title>
    <style>
        /* 确保html和body占满整个视口，清除默认边距 */
        html, body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            background-color: darkslategray;
            color: lightgray;
        }

        /* 让section铺满整个视口宽度 */
        .full-screen-section {
            background-color: red;
            width: 100vw;
            min-height: 100%;
        }
    </style>
</head>
<body>
    <header>Some header content</header>

    <section class="full-screen-section">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit,
        deleniti velit cum sit dolorem dignissimos sunt doloribus quos
        tempore id? A ea totam iusto? Consequuntur at provident maiores
        laboriosam iste unde non blanditiis, nulla ut in hic dolor rem
        beatae quos mollitia quod! Officia exercitationem perferendis unde
    </section>

    <main>
        <h1>Some content here</h1>
        <div>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi
            quos possimus fuga voluptatem laudantium aut a tempora. Neque
            magnam rem similique, aliquid blanditiis, atque aspernatur ut
            harum eius nihil voluptates doloremque amet ratione quis fugiat.
        </div>

        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </main>

    <footer>
        <p>Some footer content</p>
    </footer>
</body>
</html>

额外说明： #

• 如果仅需修改两侧空白颜色而非完全消除，直接给html设置背景色即可——当viewport-fit=cover生效后，网页未覆盖的区域会显示html的背景色。
• <meta name="theme-color">仅控制浏览器顶部状态栏颜色，和网页内容区域的空白无关，因此对你的问题没有帮助。

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