1

The w3c standard for the deviceorientation event:

http://w3c.github.io/deviceorientation/spec-source-orientation.html#deviceorientation

The W3C standard describes how the alpha attribute of this event is supposed to change when the device is rotated around its z-axis.

The z-axis points towards you when holding the phone in front of you while you're looking straight at its screen. It is a normal vector of the plane coinciding with the screen.

It seems to me that things work slightly (= annoyingly) different on my windows phone. The alpha attribute changes with rotation around the x-axis as well (in portait mode, that is).

How to repeat:

  1. Hold up the phone in front of you (in portait mode).
  2. Make sure gamma is negative, meaning the phone it slightly tilted backwards.
  3. Now make sure that alpha is approx. zero degrees meaning the phone is centered on its y-axis.
  4. Tilt the phone slightly to the left, make alpha approx 30 degrees, while making sure gamma stays negative.
  5. Now turn the phone slightly towards you making gamma positive

Notice how, the moment gamma becomes positive, the alpha value jumps 180 degrees. This is not described in the W3C standard, or did I miss something?

-

Another strange thing happens when you go to landscape mode. When tilting the phone around its z-axis in landscape mode, not the alpha attribute, but the beta attribute seems to change?! To make the alpha attribute change in landscape mode, you have to turn the phone around it's (original) x-axis, which, for instance, means turning the top of the phone (which is now on the left side, as you are in landscape mode) away from you.

-

I don't have an android or iOS device at my disposal at this time, but at least the emulator in the Chrome desktop browser behaves completely different (and in agreement with the W3C standard, it seems).

-

I put a simple test script here:

http://locaboa.com/wpdotest.html

(open it on your smartphone)

-

Am I doing something wrong / missing something?

Any ideas as how to correct this?

=======================

edit: just tested it on an iPhone, seems to behave the same way as the windows phone...

Stefan
  • 5,203
  • 8
  • 27
  • 51
kevin
  • 63
  • 1
  • 6
  • possible duplicate of [Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions](http://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad) – Joffrey Maheo Sep 01 '14 at 19:38
  • Hi Joffrey, unfortunately that does not answer the question. I understand the difference between landscape and portrait mode and I know how to detect the difference between them. My questio nis about the actual ANGLES reported by the device in relationship to its orientation in 3D space. The way these angles are reported does not seem to comply with the standard set by the W3C and it furthermore seems to differ between landscape and portrait mode. – kevin Sep 01 '14 at 20:33

1 Answers1

0

Answer: they've done it again.

Now that most of CSS and JS has been standardized of polyfilled, the big browser and OS vendors have decided to implement different ways of processing and passing device orientation data to web devs. Also, the standard is not airtight.

I found this:

https://github.com/ajfisher/deviceapi-normaliser

Which is a very useful summation of differences between different vendor's applications, but (unfortunately) not a working polyfill. For my project I am slowly filling in blanks, and expect to reach a full polyfill in a couple of months. In the meantime here is a script that turns WP IE coordinates to a working yaw / pitch / roll coordinate set.

// [[ PITCH ]]

    if ( event.gamma < 0 ) {

        normalized.pitch = -90 - event.gamma ;

    } else {

        normalized.pitch = 90 - event.gamma ;

    }

// [[ YAW ]]

    if ( normalized.pitch > 0 && event.alpha > 180 ) {

        normalized.yaw = event.alpha - 180 ;

    } else if ( normalized.pitch > 0 && event.alpha < 180 ) {

        normalized.yaw = event.alpha + 180;

    }

// [[ ROLL ]]

    if ( normalized.pitch > 0 ) {

        var sign = Math.abs( event.beta ) / event.beta;

        normalized.roll = sign * 180 - event.beta ;

    }
kevin
  • 63
  • 1
  • 6