fix Zoom Display issue on iOS (#5404)

ios/App/App.xcodeproj/project.pbxproj

@@ -16,6 +16,8 @@
 		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
 		5FD5BB71278579F5008E6875 /* DownloadiCloudFiles.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FD5BB70278579F5008E6875 /* DownloadiCloudFiles.swift */; };
 		5FD5BB73278579FF008E6875 /* DownloadiCloudFiles.m in Sources */ = {isa = PBXBuildFile; fileRef = 5FD5BB72278579FF008E6875 /* DownloadiCloudFiles.m */; };
+		5FF8632A283B5ADB0047731B /* Utils.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FF86329283B5ADB0047731B /* Utils.swift */; };
+		5FF8632C283B5BFD0047731B /* Utils.m in Sources */ = {isa = PBXBuildFile; fileRef = 5FF8632B283B5BFD0047731B /* Utils.m */; };
 		5FFF7D6D27E343FA00B00DA8 /* ShareViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FFF7D6C27E343FA00B00DA8 /* ShareViewController.swift */; };
 		5FFF7D7027E343FA00B00DA8 /* MainInterface.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 5FFF7D6E27E343FA00B00DA8 /* MainInterface.storyboard */; };
 		5FFF7D7427E343FA00B00DA8 /* ShareViewController.appex in Embed App Extensions */ = {isa = PBXBuildFile; fileRef = 5FFF7D6A27E343FA00B00DA8 /* ShareViewController.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
@@ -70,6 +72,8 @@
 		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
 		5FD5BB70278579F5008E6875 /* DownloadiCloudFiles.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DownloadiCloudFiles.swift; sourceTree = "<group>"; };
 		5FD5BB72278579FF008E6875 /* DownloadiCloudFiles.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DownloadiCloudFiles.m; sourceTree = "<group>"; };
+		5FF86329283B5ADB0047731B /* Utils.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Utils.swift; sourceTree = "<group>"; };
+		5FF8632B283B5BFD0047731B /* Utils.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = Utils.m; sourceTree = "<group>"; };
 		5FFF7D6A27E343FA00B00DA8 /* ShareViewController.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = ShareViewController.appex; sourceTree = BUILT_PRODUCTS_DIR; };
 		5FFF7D6C27E343FA00B00DA8 /* ShareViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareViewController.swift; sourceTree = "<group>"; };
 		5FFF7D6F27E343FA00B00DA8 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/MainInterface.storyboard; sourceTree = "<group>"; };
@@ -138,6 +142,8 @@
 		504EC3061FED79650016851F /* App */ = {
 			isa = PBXGroup;
 			children = (
+				5FF86329283B5ADB0047731B /* Utils.swift */,
+				5FF8632B283B5BFD0047731B /* Utils.m */,
 				5FD5BB72278579FF008E6875 /* DownloadiCloudFiles.m */,
 				5FD5BB70278579F5008E6875 /* DownloadiCloudFiles.swift */,
 				D32752BF2754C5AB0039291C /* AppDebug.entitlements */,
@@ -355,8 +361,10 @@
 				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
 				5FD5BB71278579F5008E6875 /* DownloadiCloudFiles.swift in Sources */,
 				FE443F1E27FF54AA007ECE65 /* Payload.swift in Sources */,
+				5FF8632C283B5BFD0047731B /* Utils.m in Sources */,
 				FE8C946B27FD762700C8017B /* FileSync.swift in Sources */,
 				FE647FF427BDFEDE00F3206B /* FsWatcher.swift in Sources */,
+				5FF8632A283B5ADB0047731B /* Utils.swift in Sources */,
 				5FD5BB73278579FF008E6875 /* DownloadiCloudFiles.m in Sources */,
 				D3D62A0A275C92880003FBDC /* FileContainer.swift in Sources */,
 				D3D62A0C275C928F0003FBDC /* FileContainer.m in Sources */,

ios/App/App/Utils.m

@@ -0,0 +1,13 @@
+//
+//  Utils.m
+//  Logseq
+//
+//  Created by leizhe on 2022/5/23.
+//
+
+#import <Foundation/Foundation.h>
+#import <Capacitor/Capacitor.h>
+
+CAP_PLUGIN(Utils, "Utils",
+           CAP_PLUGIN_METHOD(isZoomed, CAPPluginReturnPromise);
+           )

ios/App/App/Utils.swift

@@ -0,0 +1,22 @@
+//
+//  Utils.swift
+//  Logseq
+//
+//  Created by leizhe on 2022/5/23.
+//
+
+import Foundation
+import Capacitor
+
+@objc(Utils)
+public class Utils: CAPPlugin  {
+    
+    @objc func isZoomed(_ call: CAPPluginCall) {
+        
+        var isZoomed: Bool {
+            return UIScreen.main.scale < UIScreen.main.nativeScale
+        }
+
+        call.resolve(["isZoomed": isZoomed])
+    }
+ }

src/main/frontend/components/header.css

@@ -339,3 +339,16 @@ html.is-native-iphone-without-notch {
         }
     }
 }
+
+html.is-zoomed-native-ios {
+    --ls-headbar-inner-top-padding: 30px;
+
+     @media (orientation: landscape) {
+        --ls-headbar-inner-top-padding: 8px;
+        --ls-headbar-height: 2.5rem;
+
+        .cp__header {
+            @apply shadow z-10;
+        }
+    }
+}

src/main/frontend/mobile/core.cljs

@@ -22,7 +22,7 @@
   []
   (let [path (fs/iOS-ensure-documents!)]
     (println "iOS container path: " path))
-
+  
   (.addEventListener js/window
                      "load"
                      (fn [_event]
@@ -30,6 +30,8 @@
                          (js/setTimeout #(deeplink/deeplink @*url)
                                         1000))))
 
+  (mobile-util/check-ios-zoomed-display)
+  
   (.removeAllListeners mobile-util/file-sync)
 
   (.addListener mobile-util/file-sync "debug"

src/main/frontend/mobile/index.css

@@ -99,3 +99,14 @@ html.is-native-android {
     }
 }
 
+html.is-zoomed-native-ios {
+    .cp__footer {
+        height: 60px;
+    }
+    
+    @media (orientation: landscape) {
+        .cp__footer {
+            height: 50px;
+        }
+    }
+}

src/main/frontend/mobile/util.cljs

@@ -1,7 +1,8 @@
 (ns frontend.mobile.util
   (:require ["@capacitor/core" :refer [Capacitor registerPlugin]]
             ["@capacitor/splash-screen" :refer [SplashScreen]]
-            [clojure.string :as string]))
+            [clojure.string :as string]
+            [promesa.core :as p]))
 
 (defn platform []
   (.getPlatform Capacitor))
@@ -23,6 +24,7 @@
 (defonce folder-picker (registerPlugin "FolderPicker"))
 (when (native-ios?)
   (defonce download-icloud-files (registerPlugin "DownloadiCloudFiles"))
+  (defonce ios-utils (registerPlugin "Utils"))
   (defonce ios-file-container (registerPlugin "FileContainer"))
   (defonce file-sync (registerPlugin "FileSync")))
 
@@ -82,3 +84,12 @@
   []
   (when-let [model (get-idevice-model)]
     (string/starts-with? (first model) "iPad")))
+
+(defn check-ios-zoomed-display
+  "Detect whether iOS device is in Zoom Display"
+  []
+  (p/let [is-zoomed? (p/chain (.isZoomed ios-utils)
+                              #(js->clj % :keywordize-keys true))]
+    (when (:isZoomed is-zoomed?)
+      (let [^js cl (.-classList js/document.documentElement)]
+        (.add cl "is-zoomed-native-ios")))))