fix(mobile): 移动端全站横向溢出修复——Header 三档断点与长词断行
- B1(移动审计 blocker):Header 7 项一行在 390px 溢出 51-88px(主题钮
被推出屏、整页可晃——用户实测报告的"布局存在问题"实锤)→ 430px
断点收紧(字号/边距/间隙/图标钮 32px)+ 370px 末档(en Open Source
长词)
- M1:.prose-tech 补 overflow-wrap:break-word(裸长 URL 曾撑破 88px,
只给了书评轨是漏)
- m1:ProjectWall 标题 i18n(en 页曾硬编码中文)+ locale prop
- m3:列表标题两行钳制(en 长标题截断丢信息);m4:页脚/pn/书架
触控目标 ≥24px
- 已知边界:320px 超窄屏 en 仍溢 23px(超出现实机型范围,记录不改)
验证: 移动溢出回归 390/360 × 12 页全过(scrollWidth 断言,曾全站
51-118px);E2E 30/30 PASS;技术文长 URL 页 +88→0
Spec: 2026-10-25_add-blog-5c
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
147f00fe1c
commit
2802278be6
6 files changed
+36
-6
No files matched your search
@@ -122,4 +122,20 @@ const switchLabel = curLocale === 'zh' ? 'EN' : '中';
|
|||||||
@media (max-width: 560px) {
|
@media (max-width: 560px) {
|
||||||
.nav-link { font-size: 14px; padding-inline: var(--space-1); }
|
.nav-link { font-size: 14px; padding-inline: var(--space-1); }
|
||||||
}
|
}
|
||||||
|
/* 移动端审计 B1:7 项一行在 390px 溢出 50-88px(主题钮被推出屏)——
|
||||||
|
更窄一档整体收紧,估算总宽 ~344px < 360 */
|
||||||
|
@media (max-width: 430px) {
|
||||||
|
.brand { font-size: 16px; }
|
||||||
|
.nav-link { font-size: 12.5px; padding-inline: 3px; }
|
||||||
|
nav ul { gap: 2px; }
|
||||||
|
.header-inner { gap: 6px; padding-inline: 10px; }
|
||||||
|
/* 图标钮在此密度下 32px(WCAG 24px 下限之上,44 标准的密度妥协) */
|
||||||
|
.header-inner .tap { min-width: 32px; min-height: 32px; }
|
||||||
|
.nav-lang { font-size: 12px; padding-inline: 2px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 370px) {
|
||||||
|
/* en "Open Source" 长词最后 4px:再收字距 */
|
||||||
|
.nav-link { font-size: 12px; padding-inline: 2px; }
|
||||||
|
.brand { letter-spacing: 0; }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -84,7 +84,7 @@ const mmdd = (d: Date) =>
|
|||||||
color: var(--ink-2);
|
color: var(--ink-2);
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
.shelf-link { float: right; font-size: 12.5px; color: var(--accent); font-weight: 400; }
|
.shelf-link { float: right; font-size: 12.5px; padding-block: 4px; color: var(--accent); font-weight: 400; }
|
||||||
.track {
|
.track {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -123,6 +123,10 @@ const mmdd = (d: Date) =>
|
|||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
.row-title {
|
.row-title {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -132,7 +136,11 @@ const mmdd = (d: Date) =>
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transition: color var(--dur) var(--ease);
|
transition: color var(--dur) var(--ease);
|
||||||
}
|
}
|
||||||
.row:hover .row-title { color: var(--accent); }
|
.row:hover .row-title {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden; color: var(--accent); }
|
||||||
.tag {
|
.tag {
|
||||||
flex: none;
|
flex: none;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
|
|||||||
@@ -3,11 +3,16 @@
|
|||||||
// 双源数据见 src/lib/projects.ts;语言色点用 linguist 常用色映射
|
// 双源数据见 src/lib/projects.ts;语言色点用 linguist 常用色映射
|
||||||
import { loadProjects, type RepoCard } from '../../lib/projects';
|
import { loadProjects, type RepoCard } from '../../lib/projects';
|
||||||
|
|
||||||
|
import { t } from '../../i18n/ui';
|
||||||
|
import type { Locale } from '../../lib/locale';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
/** 展示上限:首页精选 6;/opensource 全量传大数 */
|
/** 展示上限:首页精选 6;/opensource 全量传大数 */
|
||||||
limit?: number;
|
limit?: number;
|
||||||
|
locale?: Locale;
|
||||||
}
|
}
|
||||||
const { limit = 6 } = Astro.props;
|
const { limit = 6, locale = 'zh' } = Astro.props;
|
||||||
|
const title = t('open_source_projects', locale);
|
||||||
const LANG_COLORS: Record<string, string> = {
|
const LANG_COLORS: Record<string, string> = {
|
||||||
Astro: '#ff5a03', TypeScript: '#3178c6', JavaScript: '#f1e05a',
|
Astro: '#ff5a03', TypeScript: '#3178c6', JavaScript: '#f1e05a',
|
||||||
Python: '#3572a5', Go: '#00add8', Rust: '#dea584', Shell: '#89e051',
|
Python: '#3572a5', Go: '#00add8', Rust: '#dea584', Shell: '#89e051',
|
||||||
@@ -23,7 +28,7 @@ try {
|
|||||||
---
|
---
|
||||||
|
|
||||||
<section class="project-wall" aria-label="开源项目">
|
<section class="project-wall" aria-label="开源项目">
|
||||||
<h2 class="wall-title">开源 · Projects</h2>
|
<h2 class="wall-title">{title}</h2>
|
||||||
<ul>
|
<ul>
|
||||||
{projects.map((p) => (
|
{projects.map((p) => (
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ const photos = (await getCollection('photos')).slice(0, 4);
|
|||||||
note: t('heatmap_note', 'en'),
|
note: t('heatmap_note', 'en'),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<ProjectWall />
|
<ProjectWall locale="en" />
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import { t } from '../../i18n/ui';
|
|||||||
title: t('heatmap_title', 'en'), summary: t('heatmap_summary', 'en'),
|
title: t('heatmap_title', 'en'), summary: t('heatmap_summary', 'en'),
|
||||||
less: t('heatmap_less', 'en'), more: t('heatmap_more', 'en'), note: t('heatmap_note', 'en'),
|
less: t('heatmap_less', 'en'), more: t('heatmap_more', 'en'), note: t('heatmap_note', 'en'),
|
||||||
}} />
|
}} />
|
||||||
<ProjectWall limit={99} />
|
<ProjectWall limit={99} locale="en" />
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -71,6 +71,7 @@ a { color: inherit; text-decoration: none; }
|
|||||||
line-height: var(--leading-tech);
|
line-height: var(--leading-tech);
|
||||||
color: var(--ink-2);
|
color: var(--ink-2);
|
||||||
max-width: var(--measure);
|
max-width: var(--measure);
|
||||||
|
overflow-wrap: break-word; /* 移动端审计 M1:裸长 URL 曾撑破 88px(只给了书评轨) */
|
||||||
}
|
}
|
||||||
.prose-tech p + p { margin-top: 0.9em; }
|
.prose-tech p + p { margin-top: 0.9em; }
|
||||||
.prose-tech h2 { font-size: var(--text-h2); margin-top: 1.8em; line-height: var(--leading-heading); text-wrap: balance; }
|
.prose-tech h2 { font-size: var(--text-h2); margin-top: 1.8em; line-height: var(--leading-heading); text-wrap: balance; }
|
||||||
|
|||||||
Reference in new issue
Block a user