Design for device orientation

Mobile devices can be viewed in both portrait and landscape orientations. For a better user experience, design your creative to respond to orientation changes using the Studio API. Alternatively, you can use CSS media queries to do the same thing.

Detect orientation using the Enabler

1. Wait for Enabler initialization (see Step 2: Add the HTML5 Enabler).
2. Use the studio.events.StudioEvent.ORIENTATION event to detect when orientation or orientation degrees change.
3. To detect the orientation, use:
   1. the Enabler.getOrientation().getMode() method to return the orientation mode of the device or the browser: portrait or landscape.
   2. the Enabler.getOrientation().getDegrees() method to return the degrees of orientation. This doesn't depend on the mode of orientation and can be used to distinguish rotation for games, etc.

Device detection sample code

var dcAd = {};
Enabler.addEventListener(studio.events.StudioEvent.ORIENTATION, 
    dcAd.changeOrientationHandler);
dcAd.changeOrientationHandler = function(){
    // Optional: Log the orientation and rotation degrees.
    console.log("orientation mode: "+Enabler.getOrientation().getMode());
    console.log("orientation degrees: "+Enabler.getOrientation().getDegrees());    
    
    if (Enabler.getOrientation().getMode() == 'portrait'){
        // Portrait mode
        // Replace the sample code below with your own code to change the 
        // container size to match the current device size in portrait mode. 
        dcAd.container.style.width = 726+'px';
        dcAd.container.style.height = 1022+'px';
        dcAd.bgImage1.style.display = 'inline';
        dcAd.bgImage2.style.display = 'none';
    } else {
        // Landscape mode
        // Replace the sample code below with your own code to change the
        // container size to match the current device size in landscape mode. 
        dcAd.container.style.width = 1022+'px';
        dcAd.container.style.height = 726+'px';
        dcAd.bgImage1.style.display = 'none';
        dcAd.bgImage2.style.display = 'inline';
    }
}