'Content is wider than screen on ios

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>
cssmobilewidthsvelte


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Thomas Hennes

Related Questions