ionic-framework - 在 Ios 上使用 Capacitor x Svelte 时按钮响应时间变慢

Question

我尝试使用 Capacitor 和 Svelte 创建一个入门应用。一切正常，除了一件事，当我使用 native html anchor (带有 svelte-routing)进行导航时，对用户交互的响应时间很慢，可能在应用程序对我的 Iphone 13 pro(真实设备)Ios 15 使用react之前 400 毫秒。相同我的 starter 中的原生 html 按钮问题。

如果我做错了什么，你能告诉我吗？

入门 repo -> https://github.com/flameapp-io/svelte-capacitor-tailwind-starter

我的导航组件:

<script lang="ts">
    import ThemeSwitch from '$lib/ThemeSwitch.svelte';
    import { Link } from 'svelte-routing';

    type NavLink = {
        name: string;
        url: string;
    };

    const navLinks: Array<NavLink> = [
        {
            name: 'Home',
            url: '/'
        },
        {
            name: 'Example',
            url: 'example'
        }
    ];
</script>

<nav class="flex items-center">
    {#each navLinks as link}
        <Link to={link.url} class="mx-5">{link.name}</Link>
    {/each}

    <ThemeSwitch />
</nav>

Answer 1

我已经通过添加这个解决了这个问题:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

在我的 index.html 中

编辑

Safari 会自动引入 300 毫秒的延迟，以解决用户可能双击页面以放大的情况。如果您在 index.html 的头部包含适当的视口(viewport)元数据，则不需要这样做。

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

如果提供此视口(viewport)，Safari 将不会在点击/点击中引入延迟。这是对 Safari issue 的引用这解决了这个问题。