I have a PWA (progressive web app) that in short displays a searchable list of PDF documents. Tapping on one of the items in the list brings up the PDF in the native view on the iPhone, which all works great. My issue is when doing this I loose the back button to return to the list. I would like to create my own top menu bar with a title and back button to return to the list as swiping back isn’t intuitive to all users and doesn’t exist if the PWA is viewed in Windows.
I started by looking for the most mobile friendly way to display the PDF without PDF toolbars or any extras. I ended up using full screen IFRAME as I could not succeed in getting EMBED to work on my iPhone. I was able to google some examples and found a layout that works to display my PDF in the IFRAME.
The problem now is I am having difficulty in getting pinch to zoom in/out to work reliably within the IFRAME to view the PDF, which is really formatted like an 8.5×11″ document. In the browser, pinch to zoom in seems to work better than pinching out, which tends to bring up the list of open windows. I cannot zoom out to see the entire document. When I run within the PWA, I can pan around the PDF within the IFRAME, but no zooming at all.
Is is something I can do to fix the behavior within the IFRAME. Basically, I don’t want any of the zoom or pan commands to pertain to the HTML page, but instead to the content within the IFRAME. Or is the IFRAME not the direction I should be looking at? I considered some of the JS PDF viewers, but that is a lot of file structure to move to a PWA just for display purposes.
Would appreciate any thoughts!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Responsive Web Design for webpage's dimensions-->
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="description" content="PDF List" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#003b5c" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#003b5c" />
<!-- Apple-specific, run in full-screen mode with a black status bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="PDF List" />
<meta name="apple-mobile-web-app-status-bar-style" content="blue" />
<title>full screen iframe</title>
<style type="text/css">
html {
overflow: auto;
}
html,
body,
div,
iframe {
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe {
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<iframe src="./test_doc.pdf"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto">
</iframe>
</body>
</html>