# Fullscreen web app ios orientation bug?

**URL:** <https://discourse.processing.org/t/fullscreen-web-app-ios-orientation-bug/28734>\
**Category:** Coding Questions\
**Created:** [March 22, 2021, 5:06pm UTC](https://discourse.processing.org/t/fullscreen-web-app-ios-orientation-bug/28734 "2021-03-22T17:06:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rikitiki](https://avatars.discourse-cdn.com/v4/letter/r/65b543/32.png) [@rikitiki](https://discourse.processing.org/u/rikitiki)\
**Post date:** [March 22, 2021, 5:06pm UTC](https://discourse.processing.org/t/fullscreen-web-app-ios-orientation-bug/28734/1 "2021-03-22T17:06:14Z")

</div>

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:

```auto
<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:

```auto
<!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:

```auto
"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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a5d76673842b8357dd17b3640f83d1f70d5d0a64.png)

Rotate to portrait:

 ![IMG_0375](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/31a819d1a0c85cbbecbb3f26cab62a41f814ba36.png)

Rotate back to landscape:

 ![IMG_0376](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fbdbcf06fce3516b60fdb7ec1215f9832f4e945f.png)

Thanks in advance for your help.

---

<div class="post-metadata">

**Author:** ![rikitiki](https://avatars.discourse-cdn.com/v4/letter/r/65b543/32.png) [@rikitiki](https://discourse.processing.org/u/rikitiki)\
**Post date:** [March 22, 2021, 8:16pm UTC](https://discourse.processing.org/t/fullscreen-web-app-ios-orientation-bug/28734/2 "2021-03-22T20:16:28Z")

</div>

I ended up finding this somewhat unsatisfying solution:

[https://stackoverflow.com/questions/56410804/function-windowresized-on-smartphones](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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![wavy](https://avatars.discourse-cdn.com/v4/letter/w/67e7ee/32.png) [@wavy](https://discourse.processing.org/u/wavy)\
**Post date:** [August 9, 2022, 3:32pm UTC](https://discourse.processing.org/t/fullscreen-web-app-ios-orientation-bug/28734/3 "2022-08-09T15:32:07Z")

</div>

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](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](https://developer.mozilla.org/en-US/docs/Web/API/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…