Fullscreen web app ios orientation bug?

p5.js Coding Questions
1

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:

IMG_0374
IMG_0374800×600 5.59 KB

Rotate to portrait:

IMG_0375
IMG_0375600×800 5.21 KB

Rotate back to landscape:

IMG_0376
IMG_0376800×600 5.6 KB

Thanks in advance for your help.

2

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
3

Hi, reviving this topic because I ran into the same issue and did not find any other posted solutions. I tried my hand at a few things too and found one trick that did the job.

In my project I had some other HTML DOM objects overlaying a p5 canvas background, and I noticed that the other DOM objects were being resized correctly, even in the mobile app mode. (For reference I basically did this https://www.youtube.com/watch?v=OIfEHD3KqCg)

Then I created an invisible DOM object with style width: 100% and height: 100%, and used a ResizeObserver to trigger a custom resize handler. In the handler I had to resize the canvas to the dimensions of the DOM object using getBoundingClientRect() (not windowWidth or windowHeight).

Hope this will be useful for anyone encountering the same issue…

1 Like