fix: disable double tap zoom
This commit is contained in:
parent
3c3a0f78d9
commit
b3b614c20a
|
|
@ -6,6 +6,7 @@ import { useAuthStore } from "./stores/auth";
|
|||
|
||||
const auth = useAuthStore();
|
||||
const reconnecting = ref(false);
|
||||
const preventDoubleTapZoom = (event: MouseEvent) => event.preventDefault();
|
||||
const retrySession = async () => {
|
||||
if (reconnecting.value || (typeof navigator !== "undefined" && !navigator.onLine)) return;
|
||||
reconnecting.value = true;
|
||||
|
|
@ -17,8 +18,14 @@ const retrySession = async () => {
|
|||
};
|
||||
const handleOnline = () => void retrySession();
|
||||
|
||||
onMounted(() => window.addEventListener("online", handleOnline));
|
||||
onBeforeUnmount(() => window.removeEventListener("online", handleOnline));
|
||||
onMounted(() => {
|
||||
window.addEventListener("online", handleOnline);
|
||||
window.addEventListener("dblclick", preventDoubleTapZoom, { passive: false });
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("online", handleOnline);
|
||||
window.removeEventListener("dblclick", preventDoubleTapZoom);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ body,
|
|||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,17 @@ async function expectNoHorizontalOverflow(page: import("@playwright/test").Page)
|
|||
}
|
||||
|
||||
test.describe("iOS 视口兼容性", () => {
|
||||
test("01-iPhone 窄视口的主要页面不产生横向滚动", async ({ browser }) => {
|
||||
test("01-双击不会触发浏览器默认缩放行为", async ({ page }) => {
|
||||
await mockApi(page);
|
||||
await 登录(page);
|
||||
|
||||
await expect.poll(async () => page.evaluate(() => {
|
||||
const event = new MouseEvent("dblclick", { bubbles: true, cancelable: true });
|
||||
return window.dispatchEvent(event);
|
||||
})).toBe(false);
|
||||
});
|
||||
|
||||
test("02-iPhone 窄视口的主要页面不产生横向滚动", async ({ browser }) => {
|
||||
const context = await browser.newContext({ ...devices["iPhone SE"] });
|
||||
const page = await context.newPage();
|
||||
await mockApi(page, { initialEntries: [makeEntry()] });
|
||||
|
|
|
|||
Loading…
Reference in New Issue