Update PDF.tsx

src/components/PDF.tsx

@@ -1,32 +1,51 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "./PDF.css";
 import CV_PDF from "./_PDF/Lars_Flem_CV_english.pdf";
 
 const PdfViewer: React.FC = () => {
-  const pdfRef = useRef<HTMLObjectElement>(null);
+  const [isIOS, setIsIOS] = useState(false);
+  const pdfRef = useRef<HTMLIFrameElement | HTMLObjectElement>(null);
 
   useEffect(() => {
-    if (pdfRef.current) {
-      const windowHeight = window.innerHeight;
+    const userAgent = window.navigator.userAgent;
 
-      if (window.innerWidth > 768) {
-        // Set height dynamically for larger screens
-        pdfRef.current.style.height = `${windowHeight - 150}px`; // Adjust as needed
-      } else {
-        // On mobile, allow scrolling and set auto height
-        pdfRef.current.style.height = "auto";
-      }
+    // Detect iOS (iPhone/iPad)
+    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+      setIsIOS(true);
     }
   }, []);
 
   return (
     <div className="pdf-viewer-container">
       <h2>CV</h2>
-      <object ref={pdfRef} data={CV_PDF} type="application/pdf" width="100%">
-        <p>
-          PDF cannot be displayed. <a href={CV_PDF}>Download the PDF</a>.
-        </p>
-      </object>
+
+      {isIOS ? (
+        // Use an iframe for iOS devices or a link as a fallback
+        <iframe
+          ref={pdfRef}
+          src={CV_PDF}
+          width="100%"
+          height="750px"
+          title="CV"
+        >
+          <p>
+            PDF cannot be displayed. <a href={CV_PDF}>Download the PDF</a>.
+          </p>
+        </iframe>
+      ) : (
+        // Use the object element for non-iOS devices
+        <object
+          ref={pdfRef}
+          data={CV_PDF}
+          type="application/pdf"
+          width="100%"
+          height="750px"
+        >
+          <p>
+            PDF cannot be displayed. <a href={CV_PDF}>Download the PDF</a>.
+          </p>
+        </object>
+      )}
     </div>
   );
 };