Supporting Portrait-First and Landscape-First devices in HTML5 Device Orientation

Hi All,



During our implementation of the Device Orientation API we uncovered an issue which would could confuse web developers when building apps using this API. The issue is caused by devices with different native orientations (portrait vs. landscape).



The problem this creates is the following:



Imagine a game which requires the user to hold the device in landscape orientation (e.g. car game). For a landscape-first devices the device height would the Y axis (attachment: GamePlay_Landscape_First_Device.PNG). But if the user has a portrait-first device, she would have to rotate the device to landscape to correctly play the game play.  Because the Y axis of the portrait-first device is still the device height, the user would continue to get the wrong Y axis information after rotating the device.  At this point, the developer has to re-map the coordinate system (Y to X and X to Y) to allow the game's logic to execute correctly since the Y axis is always relative to the device's native orientation. (attachment: GamePlay_Portrait_First_Device.PNG).



That is the reason we believe it is important for the developer to know the device's native orientation so they could map their axis respectively.  The proposal is to expose this information using a new Screen Orientation API and provide the developer with guidance on how to re-map the device orientation coordinates if they require to do so (attachment: Remapping_Table.PNG). Since Screen Orientation has to do with how the physical device is being held (portrait or landscape), exposing the native orientation made sense under the Screen Orientation API.



The Interface for Screen Orientation would therefore be as follows:



partial interface Screen {

....

readonly attribute DOMString nativeorientation; };



The meaning and type of this new property would look something like this:



nativeorientation of type DOMString, readonly



The user agent MUST return the value representing the native orientation of the screen. The returned orientation MUST be in the current orientation list.



The nativeorientation would be populated from the orientation using the DisplayProperties.NativeOrientation on Windows devices. On Android devices, the NativeOrientation has to be calculated using the Display.getRotation() function and comparing it to the current orientation.

I look forward to your feedback.

Thanks,
Dhruv Chadha
Program Manager, Core Web Platform
Windows Phone

Received on Wednesday, 14 August 2013 13:21:09 UTC