Ios上电容器x Svelte的慢速按钮响应时间

Question

我试图用电容器和Svelte创建一个入门应用程序。一切都很好，除了一件事，当我使用本地html锚点(具有纤细的路由(进行导航时，对用户交互的响应时间很慢，可能在应用程序在我的Iphone 13 pro(真实设备(Ios 15上做出反应之前400毫秒。在我的初学者中，原生html按钮也有同样的问题。

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

启动repos->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将自动引入300ms的延迟，以考虑用户可能双击页面进行放大。不过，如果在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将不会延迟单击/点击。以下是解决此问题的Safari问题的参考资料。