diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts index dc193b9..e1b1cbf 100644 --- a/apps/web/src/main.ts +++ b/apps/web/src/main.ts @@ -8,6 +8,20 @@ import storage from "utils/storage" import App from "./App.vue" import { admins, ojs } from "./routes" +/** + * iPhone 上点进字号小于 16px 的输入框(Naive 的输入框是 14px、代码编辑器 15px), + * Safari 会自动把整页放大,而且退出输入也不缩回去,得学生自己双指缩。 + * maximum-scale=1 能关掉这个自动放大;iOS 10 起照样允许双指缩放,所以只给 iOS 加 —— + * 安卓上这么写会真的禁掉双指放大,看题面图片、代码就没法放大了。 + */ +const isIOS = + /iPhone|iPad|iPod/.test(navigator.userAgent) || + (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) +if (isIOS) { + const viewport = document.querySelector('meta[name="viewport"]') + viewport?.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1") +} + const router = createRouter({ history: createWebHistory(), routes: [ojs, admins], diff --git a/apps/web/src/oj/ai/components/StatStrip.vue b/apps/web/src/oj/ai/components/StatStrip.vue index 11513d8..5f07e40 100644 --- a/apps/web/src/oj/ai/components/StatStrip.vue +++ b/apps/web/src/oj/ai/components/StatStrip.vue @@ -20,7 +20,12 @@ const cells = computed(() => { const percent = r.solved ? Math.round((r.firstTry / r.solved) * 100) : 0 const firstSub = `一次就对 · 占 ${percent}%` const list: Cell[] = [ - { big: r.solved, unit: "道", sub: c ? `做对 · 班上中间那位 ${c.medianSolved} 道` : "做对" }, + // 数和「道」之间用不换行空格:手机上两列挤,单个「道」会被甩到下一行 + { + big: r.solved, + unit: "道", + sub: c ? `做对 · 班上中间那位 ${c.medianSolved}\u00a0道` : "做对", + }, { big: r.firstTry, unit: "道", diff --git a/apps/web/src/oj/contest/pages/rank.vue b/apps/web/src/oj/contest/pages/rank.vue index 48b04ce..c1a16aa 100644 --- a/apps/web/src/oj/contest/pages/rank.vue +++ b/apps/web/src/oj/contest/pages/rank.vue @@ -137,9 +137,13 @@ const columns = computed(
{{ place }}
@@ -534,4 +538,47 @@ const columns = computed( .empty { padding: 32px var(--oj-pad-x); } + +/* 手机:三级台阶一共 646px 宽,原样摆第一名就被挤到屏幕外了。三块平分一行, + 名字截断、班级和用时折成两行 */ +@media (max-width: 640px) { + .podium-row { + gap: 16px; + } + + .podium { + width: 100%; + gap: 6px; + } + + .step { + flex: 1 1 0; + width: auto; + min-width: 0; + } + + .podium-name, + .p1 .podium-name { + font-size: 15px; + max-width: 100%; + } + + .podium-meta { + font-size: var(--oj-fs-meta); + text-align: center; + } + + .podium-meta > span { + display: block; + white-space: nowrap; + } + + .podium-meta > .sep { + display: none; + } + + .mine { + width: 100%; + } +} diff --git a/apps/web/src/oj/learn/components/LessonBody.vue b/apps/web/src/oj/learn/components/LessonBody.vue index 93b79d6..cee0894 100644 --- a/apps/web/src/oj/learn/components/LessonBody.vue +++ b/apps/web/src/oj/learn/components/LessonBody.vue @@ -75,6 +75,14 @@ function inline(text: string) { .body :deep(.oj-markdown th) { white-space: nowrap; } +/* 360 宽的安卓机上四列表差三十来像素,最后一列被切掉、得横着滑才看得到:格子收窄一点 */ +@media (max-width: 480px) { + .body :deep(.oj-markdown th), + .body :deep(.oj-markdown td) { + min-width: 3.5em; + padding: 6px 8px; + } +} .goals { margin: 4px 0 8px; padding: 12px 16px; diff --git a/apps/web/src/oj/problem/components/MobileActionBar.vue b/apps/web/src/oj/problem/components/MobileActionBar.vue index eecba1b..293f10b 100644 --- a/apps/web/src/oj/problem/components/MobileActionBar.vue +++ b/apps/web/src/oj/problem/components/MobileActionBar.vue @@ -5,7 +5,7 @@ import { useCodeStore } from "oj/store/code" import { useProblemStore } from "oj/store/problem" import { useSubmissionStore } from "oj/store/submission" import SubmitCode from "./SubmitCode.vue" -import { editorFocused } from "../utils/symbolKeys" +import { typing } from "../utils/symbolKeys" const SubmitFlowchart = defineAsyncComponent(() => import("./SubmitFlowchart.vue")) @@ -30,8 +30,9 @@ const canRunSamples = computed(