550 字
1 分钟
Mizuki博客移动端布局突变
Mizuki博客移动端布局突变的追根溯源和解决方法
现象
我的 Astro 博客（ Mizuki 主题）在移动端出现了一个诡异问题：
- 页面刚加载时显示正常。
- 约 1-2 秒后（歌单加载完成），整个页面布局突然被撑大，内容在移动端难以看清楚。
- 手动切换到歌单中的第二首歌，布局立刻恢复正常。
页面刚加载时的正常布局
歌单加载完成后的布局错乱（页面撑大，内容看不清）
数据流简图
config.ts (musicPlayerConfig) ↓ mode: "meting" / "local"musicPlayerStore.ts ↓ initialize() → loadPlaylist() ↓ 根据 mode 选择数据来源 ├── mode === "meting" │ ↓ fetchMetingPlaylist() │ ↓ 请求 Meting API (id, server, type) │ ↓ 返回 JSON 数组 │ ↓ map(convertMetingSong) // ⚠️ 问题函数 │ ↓ 创建 Song 对象 { title, artist, ... } │ └── mode === "local" ↓ loadLocalPlaylist() ↓ 读取本地常量 LOCAL_PLAYLIST ↓ state.playlist 更新MusicPlayer.svelte (订阅 store) ↓ 渲染子组件 (MiniPlayer, PlayerBar) ↓ 显示 artist 字段 ↓ 移动端超长文本 → 撑开父容器 → 布局错乱 ❌排查过程
对比 local 模式与 meting 模式
Mizuki 音乐播放器支持两种歌单来源：
local：本地硬编码歌单（艺术家名较短，布局正常）。meting：通过 Meting API 获取网易云歌单（出现问题）。
local 模式数据（正常）：
[ { "title": "口笛で愛は歌えない", "artist": "Dazbee" }, { "title": "ひとり上手", "artist": "Kaya" }]meting 模式数据（出现问题的第一首歌）：
{ "title": "24/7(纯音乐)", "artist": "吴佳隆 / 包子音乐社 / 宣子 / DJ枫叶 / DJ大筒 / 小魚yzz / 北野弦疑 / 梦晨 / 小耳朵乐乐 / 瑞雪映春色 / 鱼丸粗面 / laika / 小民 / LiuTangping / 八点零八"}艺术家名长度超过 200 个字符！
定位渲染组件
播放器组件 MusicPlayer.svelte 中，艺术家名最终渲染在 .song-artist 元素内。该元素未做长度限制，在移动端小屏幕上导致文本换行，撑开了父容器宽度，从而推动页面其他元素下移。
验证原因
手动切换到第二首歌（艺术家名正常），布局立刻恢复。这说明超长文本是布局错乱的直接诱因。
解决方案：数据层截断
首先尝试 CSS 方案：
.song-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw;}未生效（可能因为父容器 flex 布局缺少 min-width: 0，或其他样式覆盖）。为了彻底解决问题，选择在数据源处直接截断字符串。
修改文件：src/stores/musicPlayerStore.ts
找到 convertMetingSong 方法，添加截断逻辑：
private convertMetingSong(song: any): Song { const titleRaw = song.name ?? song.title ?? i18n(Key.unknownSong); const artistRaw = song.artist ?? song.author ?? i18n(Key.unknownArtist);
const truncate = (str: string, maxLen: number): string => { if (!str) return str; return str.length > maxLen ? str.slice(0, maxLen) + '...' : str; };
const title = truncate(titleRaw, 30); // 标题最多30字符 const artist = truncate(artistRaw, 20); // 艺术家最多20字符
// 原有 duration 等其他处理保持不变 let dur = song.duration ?? 0; if (typeof dur === "string") dur = parseInt(dur, 10); if (dur > 10000) dur = Math.floor(dur / 1000); if (!Number.isFinite(dur) || dur <= 0) dur = 0;
return { id: typeof song.id === "string" ? parseInt(song.id, 10) : (song.id ?? 0), title, artist, cover: song.pic ?? "", url: song.url ?? "", duration: dur, };}最终效果
- 超长的艺术家名被截断为
"吴佳隆 / 包子音乐社 / 宣..."的形式，不会换行，也不会撑开布局。 - 移动端布局稳定，不再出现加载后移位。
- 保留了原始 API 数据完整性，仅在展示层做截断。
涉及文件
src/stores/musicPlayerStore.ts（convertMetingSong方法）
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
Mizuki博客移动端布局突变
https://cmzh.yongs.xyz/posts/歌曲艺术家字段过长导致页面被撑大/ 部分信息可能已经过时
相关文章 智能推荐
1
刚发布的日记，Vercel部署后却显示8小时前？
Bug记录 Vercel部署时日记时间差计算错误的解决
2
Mizuki博客搭建与Vercel部署
教程 如何搭建一个Mizuki主题的Astro博客，以及如何通过vercel部署这个静态项目，并配置自己的域名，让国内也可以正常访问。
3
Spring AI Alibaba 实战：使用 Redis或JDBC 实现持久化对话记忆
教程 使用Redis或者JDBC在Spring AI Alibaba中实现持久化对话记忆。
4
Codex桌面版接入DeepSeek国内大模型
教程 记录从零开始配置 Codex 桌面版，将其后端模型替换为 DeepSeek 的全过程。