Capacitor x Svelte on Ios 时按钮响应时间变慢

Question

我尝试使用 Capacitor 和 Svelte 创建一个入门应用。一切正常，除了一件事，当我使用本机 html 锚点（带有 svelte-routing）进行导航时，对用户交互的响应时间很慢，可能在应用程序对我的 Iphone 13 pro 做出反应之前 400 毫秒（真实设备）Ios 15. 我的启动器上的原生 html 按钮也有同样的问题。

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

初学者回购 -> 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 的头部包含适当的视口元，则不需要这样做。

<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"/>

如果提供此视口，Safari 将不会在 click/tap 中引入延迟。这是对解决此问题的 Safari issue 的引用。

Capacitor x Svelte on Ios 时按钮响应时间变慢

Slow button response time with Capacitor x Svelte on Ios

ionic-framework

tailwind-css

svelte

capacitor

vite