Here’s a simple CSS snippet to separate font size behavior between mobile and desktop:
• On mobile (iPhone) it enforces fixed font sizes for
editor, preview (reading mode), source/code view, and file explorer.
• On desktop (Windows/macOS) it does not set any font-size, so
Obsidian’s built-in zoom (Ctrl/Cmd + Mouse Wheel or Appearance → Font size)
continues to work normally.
The key idea is:
never set font-size on desktop if you want Obsidian’s zoom to remain functional.
This allows precise, stable readability on mobile while keeping full flexibility on desktop.
CSS
/* =========================================================
MOBILE / iPhone
Fixed font sizes (independent from Obsidian zoom settings)
========================================================= */
@media (max-width: 820px) {/* Live editor (CodeMirror) */
.cm-editor {
font-size: 20px !important;
}/* Source / Markdown code view */
.markdown-source-view {
font-size: 20px !important;
}/* Reading / Preview mode */
.markdown-preview-view {
font-size: 19px !important;
}/* File explorer (files and folders) */
.nav-file-title,
.nav-folder-title {
font-size: 19px !important;
}
}/* =========================================================
DESKTOP / Windows
Do NOT set font-size here
→ Obsidian zoom (Ctrl + Mouse Wheel / Appearance settings)
stays fully functional
========================================================= /
@media (min-width: 821px) {
/ intentionally empty */
}
