PWA: on iOS, the viewport keeps automatically zooming in when editing or writing text

[kraashen]

Describe the Bug

On iOS, the PWA view keeps zooming in when editing pages and tapping on the text areas. This seems to originate from that by default, iOS zooms on the text field when pixel size is less than 16px.

This results in situation where:

• Save button gets hidden from the view
• Toolbar is shown only partially
• Left side tools get hidden
• Requires manual zooming out to find the tools and save button again

While searching for the issue, this seems to be a relatively common issue with any PWA apps. There seems to be multiple ways to solve this, but not all downsides were immediate for me. Same behavior is reproduced on every text field including but not limited to:

• Login screen
• Search box
• Shelf/book description and detail fields

Some solutions included:

• Detect iOS user agent and
  • use 16px as minimum font size in the editor view
  • OR
  • Set certain viewport meta tags such as user-editable=0 and maximum-scale=1 to prevent the browser from zooming in when using it as a PWA app

Steps to Reproduce

iPhone Air
iOS 26.1

1. Pin Bookstack as an app from mobile browser
2. Open PWA
3. Navigate to any page
4. Enter editing mode
5. Tap the text view

Expected Behaviour

The editor view stays at full width without zooming in to the text field.

Screenshots or Additional Context

Tested also the beta preview of the editor, and same behavior seemed to occur.

Browser Details

Firefox/Safari on iOS + pin app as PWA

Exact BookStack Version

v25.11

[kraashen]

Didn't realize this earlier, but the behavior reproduces on any text input field. Modified the original issue to reflect this finding.

[kraashen]

This hack in the Custom HTML Head Content seems work as a workaround, though might still miss some user editable fields.

<style>
    @media screen and (max-width: 880px) {
        body.ios-client input,
        body.ios-client textarea,
        body.ios-client select,
        body.ios-client .search-box,
        body.ios-client .cm-editor,
        body.ios-client .editor-content-area,
        .mce-content-body {
            font-size: 1.15rem !important;
        }
    }
</style>
<script>
    const iOS = /iPad|iPhone/.test(navigator.userAgent) || (navigator.userAgent.includes("Mac") && "ontouchend" in document);
    if (iOS) {
      document.addEventListener("DOMContentLoaded", function() {
        if (!document.body.classList.contains("ios-client")) {
          document.body.classList.add("ios-client");
        }
      });
    }
</script>

EDIT: However as MDN documentation notes, this is quite suboptimal way to circumvent around it and other methods should be used instead, but not sure if this is iOS specific issue.