Resizable app window on iPadOS 26

Questions
1

We have a Framework7 v7 HTML5+CSS PWA running fine on iPadOS 26, except for the new resizable windows feature. When the user resizes the app’s window, a small Mac-like set of window control buttons overlay the top-left corner of the navbar - right on top of the .left element - usually the “back” or “menu” button! The obvious solution, detect when the window is smaller than fullscreen and set a class for styling the navbar, turned out to be tricky so I thought I’d share it here for any others with broken apps.

Mobile Safari only sets the screen object properties on initial app load. If you rotate the iPad after the app is loaded, the screen.availHeight and screen.availWidth don’t update, so we can’t just use them in app.resize as expected. Add the following code to app.js before initializing the app to save the initial screen values and orientation and helper functions to test for fullscreen.

 // Store the physical screen dims on load
const avail0 = {
  w: screen.availWidth,
  h: screen.availHeight
};

// also store the “swapped” version for when the orientation is rotated
const availSwapped = {
  w: avail0.h,
  h: avail0.w
};

// Store the screen orientation on load
const startOrientation = window.matchMedia("(orientation: portrait)").matches ? "(orientation: portrait)" : "(orientation: landscape)";

// Get the current available screen dims adjusted for orientation
function getAvailableScreen() {
  return window.matchMedia(startOrientation).matches ? avail0 : availSwapped;
}

// Return true iff our window is set to full available width and height
function isFullScreen() {
  const { w: A_W, h: A_H } = getAvailableScreen();

  return A_W == window.innerWidth && A_H == window.innerHeight;
}

Also in app.js, add the following to detect resize events:

app.on( 'resize', () => {
  if( app.device.ipad && !isFullScreen() )
    $$('body').addClass('ipad-resizable');
  else
    $$('body').removeClass('ipad-resizable');
});

Then, in app.css, add rules to shift the .left elements over when .ipad-window is set:

/*
  Make room for the window control button in top left when window is resized on iPadOS 26+
    Class .ipad-resizable is toggled on body in app.resize event handler
 */
.ipad-resizable .panel-left .navbar .left {
  padding-left: 64px;
}
.ipad-resizable .panel-left:not(.panel-in-breakpoint) ~ .view .navbar .left {
  padding-left: 64px;
}

It seems to be working fine, but of course any suggestions are welcome. Note that you may need to change app to App or however you named it. Hope it helps.