Skip to content

fix(reader): 關閉 iOS Safari text autosizing 避免 PWA 內文異常放大 #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Retsomm merged 1 commit into from
Jul 31, 2026
Merged

fix(reader): 關閉 iOS Safari text autosizing 避免 PWA 內文異常放大 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions pwa-next/src/components/Reader/readerStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,17 @@ export const applyFontSizeOverride = (doc: Document, size: number) => {
setTimeout(() => setInlineFontSize(doc, size), 150)
}

// iOS Safari（含「加入主畫面」的 standalone PWA）有一個獨立於 font-size 之外的
// text autosizing 演算法：它會依欄寬/裝置寬的比例，在畫面「渲染時」額外把文字放大
// 顯示，這個放大不會反映在 getComputedStyle().fontSize 上，所以上面 applyFontSizeOverride
// 逐一覆寫 inline font-size 也蓋不掉它——這正是本機瀏覽器（無此 autosizing 行為）測試正常，
// 只有實機 iOS PWA 才會看到文字被異常放大、擠壓版面的原因。多欄分頁排版（epub.js 的
// paginated flow 本質上就是窄欄 CSS columns）特別容易觸發這個演算法。
// 標準解法是明確設定 text-size-adjust: 100%，關閉這個自動放大。
export const applyTextSizeAdjustOverride = (doc: Document) => {
injectStyle(doc, 'tit-tsa', `html, body, * { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }`)
}

// 部分書本（尤其某些直式排版的中文電子書）內建 CSS 會在特定元素（不一定是 html/body，
// 可能是內文的 wrapper div）設定 writing-mode: vertical-rl !important，跟本 App 固定的
// 橫向分頁 flow 衝突，疊在一起會變成直排文字塞進橫向分頁容器裡，版面完全跑掉，標點符號
Expand Down
4 changes: 3 additions & 1 deletion pwa-next/src/hooks/reader/useReaderEngine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import type { Annotation } from '@/store/useAnnotationStore'
import { saveProgress, loadProgress, saveBookSettings, loadBookSettings } from '@/hooks/useLibrary'
import type { BookRecord } from '@/hooks/useLibrary'
import { patchBookPrototype, patchIframeViewPrototype, patchRenditionPrototype } from '@/components/Reader/epubPatches'
import { applyDarkOverride, applyFontFamilyOverride, applyFontSizeOverride, applyLetterSpacingOverride, applyLineHeightOverride, applyWritingModeOverride, normalizeFontFamily } from '@/components/Reader/readerStyles'
import { applyDarkOverride, applyFontFamilyOverride, applyFontSizeOverride, applyLetterSpacingOverride, applyLineHeightOverride, applyTextSizeAdjustOverride, applyWritingModeOverride, normalizeFontFamily } from '@/components/Reader/readerStyles'
import { convertDoc, getToSC, getToTC, restoreDoc } from '@/components/Reader/scriptConversion'
import { DEBUG_TTS_FOLLOW, TTS_HIGHLIGHT_INTERVAL, TTS_NEW_PAGE_AUTO_FOLLOW_GUARD, TTS_PAGE_END_FIXED_LEAD, TTS_USER_INPUT_GRACE, clearTTSHighlight, clearTTSHighlights, collectContentDocuments, createRangeFromTextOffset, ensureTTSHighlightStyle, getBoundaryOffsetFromRange, getTTSRangeViewportState, getTextIndex, paintTTSHighlightOverlay, ttsTextIndexCache } from '@/components/Reader/ttsHighlight'
import { computeAccurateTotal, computeChapterAverage, computeGlobalPage, clampProgressRatio, resolveInitialPageInfo } from '@/components/Reader/progressCalculations'
Expand Down Expand Up @@ -367,6 +367,8 @@ export const useReaderEngine = (params: {
// 內文排版方向永遠固定 ltr，理由同上面 forceReadingDirection 的說明——不跟隨
// 使用者的翻頁方向偏好，那個偏好只影響按鈕/手勢要呼叫 next 還是 prev
applyWritingModeOverride(doc, 'ltr')
// 關閉 iOS Safari 的 text autosizing，避免實機 PWA 把內文額外放大（見 readerStyles.ts 說明）
applyTextSizeAdjustOverride(doc)

// 腳本轉換：只在顯示腳本與書本原始語言不同時才轉換
if (scriptRef.current !== baseScriptRef.current) {
Expand Down
Loading