Conditional Visibility based on orientation of user device

Design help Custom code
1

Hey all,

I want to create a type of full screen popup that only shows when a user is viewing our website on iPad in portrait orientation that asks then to turn their device to horizontal, and wont let them access the site until the turn their device. Is this possible to do in Webflow? How can you create a site or page that registers the users device orientation? I’m assuming it has something to do with conditional visibility but I’m new to webflow and web dev. Thanks for any help!

Here’s the link to the site I’m referencing: https://www.exoape.com/ You have to view it on iPad in portrait to see what I’m talking about but I’ve also included a screen shot.

IMG_0885.PNG
IMG_0885.PNG1668×2224 94.3 KB

2

hi @Jason99 you can start here to learn how to but feel free to find more resources on the internet.

3

Hey thanks for the insight! I had assumed that it was achievable using custom code, but was wondering if there was any type of workaround or hack that you could create directly in Webflow without code?

4

As far as I know, I’m afraid you need to use the code.

5

hey @Jason99 To detect the device orientation, you can use the JavaScript window.orientation property, which returns the current orientation angle of the device (0, 90, -90, or 180 degrees). You can then use this value to determine whether the device is in portrait or landscape orientation.

<div id="orientation-popup">
  <p>Please turn your device to landscape orientation to continue</p>
</div>

<script>
  function detectOrientation() {
    var orientation = window.orientation;

    if (orientation === 0 && navigator.userAgent.match(/iPad/i)) {
      // iPad in portrait mode detected
      document.getElementById("orientation-popup").style.display = "block";
    } else {
      // iPad in landscape mode or non-iPad device detected
      document.getElementById("orientation-popup").style.display = "none";
    }
  }

  window.addEventListener("orientationchange", detectOrientation);
  detectOrientation(); // run the function on page load
</script>