手机横握时如何消除两侧的空间？

Question

当我在 iPhone 上以 landscape 方向打开应用程序时，我收到了这些空白。

我想知道，有没有可能的方法来得到摆脱它们或至少使它们不同颜色？

例如，假设我有这个模板：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test document</title>
    </head>
    <body
        style="
            background-color: darkslategray;
            color: lightgray;
            margin: 0;
            padding: 0;
        "
    >
        <header>Some header content</header>

        <section style="background-color: red; width: 100%; height: 100%">
            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>

在这种情况下，部分在横向模式下不是完全拉伸，我希望它的边缘呈红色：

附注

<meta name="theme-color" content="#000607" />

在这种情况下不执行任何操作。

Answer 1

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

尝试使用这个元标记，它应该可以解决问题

手机横握时如何消除两侧的空间？

问题描述投票：0回答：1

1个回答

最新问题

手机横握时如何消除两侧的空间？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1