Search code examples
cssaframedevice-orientation

A-Frame WebVR - Device Orientation breaks

enter image description hereWhen viewing this Codepen Demo on a device on portrait, it works as expected. When veiwing with device orientation lock off and turning to landscape, it fills half the screen.

CODE

<html>

  <head>
    <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>

<body>

  <a-scene>
    <a-sky src="https://ucarecdn.com/e1c757bc-73ee-4efe-b068-4f778ce212a3/" rotation="0 -20 0"></a-sky>
  </a-scene>

</body>

</html>

I've tried this meta tag with no success:

<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">

HERE"S MY PEN

Codepen Code

Solution

  • Have you tried with the latest version of a-frame by chance?

    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

    A quick test appears to work on my phone in both landscape and portrait:

    https://a-frame-device-orientation-test.glitch.me/