内容比iOS上的屏幕宽

发布于 2025-01-29 04:04:57 字数 1984 浏览 1 评论 0原文

我正在使用屏幕键盘创建一个像应用这样的Wordle。在桌面上开发并使用开发工具模拟移动屏幕时，它看起来不错。但是，当我在iPhone（Safari和Chrome）上查看网站时，键盘太宽了，被切断了。

我检查了Chrome的Android设备，再次看起来还不错。

我正在Svelte中开发，这是我的相关代码：

    <script lang="ts">
        import Key from './Key.svelte';
        const lets = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'];
    </script>

    <div class="keyboard">
    {#each lets as row, i}
        {#if i === 2}
            <div class="row"
                <Key letter="enter" />
                {#each row as letter}
                    <Key {letter}  />
                {/each}
                <Key letter="del" />
            </div>
        {:else}
            <div class="row">
                {#each row as letter}
                    <Key {letter} />
                {/each}
            </div>
        {/if}
    {/each}
</div>

<style>
    .keyboard {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0 8px;
        height: 200px;
        max-width: 100vw;
    }
    .row {
        display: flex;
        justify-content: center;
        gap: 6px;
        max-width: 100vw;
        touch-action: manipulation;
        margin: 0 auto 8px;
    }
</style>

这是Key.Svelte：

<script lang="ts">
    export let letter: string;
</script>

<button>{letter}</button>

<style>

button {
    background-color: rgb(152, 152, 152);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 4px;
    height: 58px;
    cursor: pointer;
    border: none;
    font-family: 'Nanum Pen Script', cursive;
    font-size: 22px;
    text-transform: uppercase;
    user-select: none;
}
</style>

原文

I'm creating a Wordle like app with an on-screen keyboard. When developing on desktop and using dev tools to simulate a mobile screen, it looks fine. But when I view the site on my iPhone (Safari and Chrome), the keyboard is too wide and is cut off.

I checked on an android device in Chrome and, again, it looks fine.

I'm developing in Svelte, here is my relevant code:

    <script lang="ts">
        import Key from './Key.svelte';
        const lets = ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'];
    </script>

    <div class="keyboard">
    {#each lets as row, i}
        {#if i === 2}
            <div class="row"
                <Key letter="enter" />
                {#each row as letter}
                    <Key {letter}  />
                {/each}
                <Key letter="del" />
            </div>
        {:else}
            <div class="row">
                {#each row as letter}
                    <Key {letter} />
                {/each}
            </div>
        {/if}
    {/each}
</div>

<style>
    .keyboard {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0 8px;
        height: 200px;
        max-width: 100vw;
    }
    .row {
        display: flex;
        justify-content: center;
        gap: 6px;
        max-width: 100vw;
        touch-action: manipulation;
        margin: 0 auto 8px;
    }
</style>

And here is Key.svelte:

<script lang="ts">
    export let letter: string;
</script>

<button>{letter}</button>

<style>

button {
    background-color: rgb(152, 152, 152);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 4px;
    height: 58px;
    cursor: pointer;
    border: none;
    font-family: 'Nanum Pen Script', cursive;
    font-size: 22px;
    text-transform: uppercase;
    user-select: none;
}
</style>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒浓于脸红 2025-02-05 04:04:57

当您使用默认步骤实例化新的Svelte项目时：

npx degit sveltejs/template my-project
cd my-project
npm install

应在public/index.html中向您提供模板。您可以在线找到此模板在这里。该模板将用于生成index.html放置在构建目录中的文件。

模板的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

您的问题的关键在这里是行＆lt; meta name ='viewport'content ='width = device-width，onirows-cale = 1'＆gt;将根据您的设备正确扩展显示/视口。

请注意，favicon.png和global.css导入也由默认安装提供，而build> build> build/bundle.css和build/bundle.js应与您的lollup.config.js（位于项目root）结合使用。

有关更多详细信息，您可以检查整个默认模板项目在这里。

When you instantiate a new Svelte project using the default steps:

npx degit sveltejs/template my-project
cd my-project
npm install

a template should be provided to you in public/index.html. You can find this template online here. This template will be used to generate the index.html file placed into your build directory.

The content of the template is the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

    <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

Key for your issue here is the line <meta name='viewport' content='width=device-width,initial-scale=1'> which will properly scale the display/viewport according to your device.

Note that the favicon.png and global.css imports are also provided by the default install, while the build/bundle.css and build/bundle.js should be set in conjunction with your rollup.config.js (located at the project root).

For more details, you can inspect the whole default template project here.

回复收藏 0 原文

~没有更多了~