Set default font size to 16px in webapp for mobile devices in order to avoid auto zoom in when the keyboard appears on iOS Safari

electron/preload/index.ts

@@ -20,6 +20,9 @@ import getCurrencyData from "./currency"
 
 
 contextBridge.exposeInMainWorld("heynote", {
+    defaultFontFamily: "Hack", 
+    defaultFontSize: 12,
+
     platform: {
         isMac,
         isWindows,

src/components/settings/Settings.vue

@@ -2,8 +2,10 @@
     import KeyboardHotkey from "./KeyboardHotkey.vue"
     import TabListItem from "./TabListItem.vue"
     import TabContent from "./TabContent.vue"
-    import { defaultFontFamily, defaultFontSize } from "@/src/editor/theme/font-theme.js"
 
+    const defaultFontFamily = window.heynote.defaultFontFamily
+    const defaultFontSize = window.heynote.defaultFontSize
+    
     export default {
         props: {
             initialKeymap: String,

src/editor/theme/font-theme.js

@@ -1,14 +1,10 @@
 import { EditorView } from "@codemirror/view"
 
-export const defaultFontFamily = "Hack"
-export const defaultFontSize = 12
-
-
 export function getFontTheme(fontFamily, fontSize) {
-    fontSize = fontSize || defaultFontSize
+    fontSize = fontSize || window.heynote.defaultFontSize
     return EditorView.theme({
         '.cm-scroller': {
-            fontFamily: fontFamily || defaultFontFamily,
+            fontFamily: fontFamily || window.heynote.defaultFontFamily,
             fontSize: (fontSize) +  "px",
         },
     })

webapp/bridge.js

@@ -8,6 +8,8 @@ mediaMatch.addEventListener("change", async (event) => {
     }
 })
 
+const isMobileDevice = window.matchMedia("(max-width: 600px)").matches
+
 let autoUpdateCallbacks = null
 let currencyData = null
 
@@ -74,6 +76,8 @@ if (settingsData !== null) {
 const Heynote = {
     platform: platform,
     isWebApp: true,
+    defaultFontFamily: "Hack", 
+    defaultFontSize: isMobileDevice ? 16 : 12,
 
     buffer: {
         async load() {