WebViewer on mobile

marrome · October 16, 2025, 9:53am

WebViewer Version: 11.4.0

We are running the WebViewer SDK in a cross-platform Capacitor App. The WebViewer is built in the Angular Frontend in JavaScript/TypeScript.
When I open a PDF on an iPhone Simulator, the view doesn’t match the screen size. See Screenshot for further explanation.

The Viewer is inside a div with following css styling:

.viewer {
width: 100%;
height: 100vh;
overflow: scroll;
}

How can I fix this so the Viewer elements aren’t rendered out of the screen boundaries?

system · October 16, 2025, 9:53am

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

It seems like the issue you’re experiencing with the WebViewer on an iPhone Simulator could be related to CSS styling or how the WebViewer is initialized. The WebViewer should ideally adjust to the screen size, but sometimes specific CSS properties or initialization parameters can affect its behavior.

Some things you can try:

Ensure that the WebViewer’s parent container is correctly set to flex or has a responsive design. Sometimes, setting the parent container to display: flex can help maintain proper scaling.

Check the viewport meta tag in your HTML file. Ensure it is set to <meta name="viewport" content="width=device-width, initial-scale=1.0"> to allow proper scaling on mobile devices.

Adjust the WebViewer’s initialization parameters to ensure it fits within the container. You may need to specify the fullScreen or similar options.

Debug the CSS to identify if any other styling is affecting the WebViewer’s container dimensions.

Here are some resources that might help you:

Viewer Customization: This guide can help you understand how to customize the WebViewer’s appearance and behavior.

Annotation Customization: Learn how to customize annotations, which might be affecting layout if they are not properly sized.

Mobile Support: This documentation provides insights on optimizing WebViewer for mobile devices.

Responsive UI: Learn how to make WebViewer responsive to different screen sizes.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

darian.chen · October 16, 2025, 12:38pm

Hello Marvin,

Thank you for contacting Apryse Forums.

The Ai had a few suggestions you could try.

Ensure that the WebViewer’s parent container is correctly set to flex or has a responsive design. Sometimes, setting the parent container to display: flex can help maintain proper scaling.
Check the viewport meta tag in your HTML file. Ensure it is set to <meta name="viewport" content="width=device-width, initial-scale=1.0"> to allow proper scaling on mobile devices.

In addition, we have an Angular sample you can reference:

github.com/ApryseSDK/webviewer-samples

webviewer-angular/src/app/app.component.css

main

.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.header {
  height: 60px;
  padding: 8px 8px 8px 16px;
  background: rgb(1, 3, 92);
  box-sizing: border-box;
  font-size: 1.2em;
  line-height: 44px;
  color: white;
}

app-webviewer {
  flex: 1;
  margin: 8px;

This file has been truncated. show original

Best Regards,
Darian

marrome · October 17, 2025, 9:03am

Hello Darian,

thanks for your reply. I think I found the cause of the problem.
I wanted the Page control settings to be in the header of the viewer. Thats why I put following settings in the Webviewer instance:

const pageControls = new instance.UI.Components.PageControls();
const defaultHeader = instance.UI.getModularHeader(‘default-top-header’);
defaultHeader.setItems([…defaultHeader.getItems(), pageControls]);

That caused the faulty rendering of the header. I removed those settings and now the header gets rendered correctly:

However, I would still like to have the Page control settings directly inside the top header instead of the bottom of the view like default. Could you help me achieve that?

darian.chen · October 17, 2025, 4:28pm

Hello Marvin,

I was not able to reproduce the issue by adding that chunk of code to my project. As you can see in the image, it adds a flyout toggle button for the page controls at the bottom in my iPhone simulator. Since we don’t have a sample capacitor app, can you try reproducing this in Safari using our React sample?

marrome · October 20, 2025, 9:02am

Hello Darian,

I’m not able to reproduce the issue using React.

It seems like editing the header items is causing problems.

I tried putting only the page controls in the top header, to test what happens:

const pageControls = new instance.UI.Components.PageControls();
const defaultHeader = instance.UI.getModularHeader(‘default-top-header’);
defaultHeader.setItems([pageControls]);

This seems to work:

But as soon as I put another item in the header, like this:

const pageControls = new instance.UI.Components.PageControls();
const mainMenu = new instance.UI.Components.MainMenu();
const defaultHeader = instance.UI.getModularHeader(‘default-top-header’);
defaultHeader.setItems([mainMenu, pageControls]);

It ignores my settings and reverts back to the default header:

Also, when I try this in Windows, the browser console gives this error when starting the WebViewer:

TypeError: Cannot read properties of undefined (reading ‘additionalItems’)