Content is wider than screen on ios

user_16388792 0
Viewed 103

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.

keyboard too wide

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>
svelte mobile css width
1 Answers

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.

user_54386160
Related