Fullscreen web app ios orientation bug?

Hello,

I’m attempting to create an iPadOS/iOS webclip of my p5 code and I’m encountering some strange behavior on rotation with windowResized().

Rotation (and windowResize()) works fine within Safari, but as soon as I turn it into a web clip using the “Add to Home Screen” option, rotation seems to permanently change the size of the sketch into a square.

I’m using the following code to allow the Safari UI elements to be removed when users “Add to Home Screen” from the website:

<meta name="apple-mobile-web-app-capable" content="yes" />

I’ve written some example code that will exhibit the unexpected behavior. Here is the index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="shortcut icon" href="#" />
    <title>bug</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="p5/p5.js"></script>
    <!-- <script src="../addons/p5.sound.js"></script> -->
    <script src="sketch.js"></script>
  </head>

  <body>
    <main></main>
  </body>
</html>

And here is my sketch.js file:

"use strict";

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0, 0, 255);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}


Here is a sequence of rotations. Launch app in landscape:

Rotate to portrait:

Rotate back to landscape:

Thanks in advance for your help.

I ended up finding this somewhat unsatisfying solution:

https://stackoverflow.com/questions/56410804/function-windowresized-on-smartphones

In this solution, the website is simply reloaded and the new orientation is honored correctly. It doesn’t feel seamless by any means because it shuts down the existing program and reloads. It’s just not as convenient as a windowResized() style approach, but it does function.

For anyone else who may run into this, here is my approach as adapted from the link above:

Create a function called checkOrientation() which you place in the draw() loop:

function checkOrientation() {
  if (window.DeviceOrientationEvent) {
    window.addEventListener(
      "orientationchange",
      function () {
        location.reload();
      },
      false
    );
  }
}

I’d still welcome any other solutions that allows data to persist in an orientation change.

Note: I did try calling resizeCanvas() instead of location.reload() and that does not work.

1 Like