Orientation Change

Dealing with orientation changes and aspect ratios

Creating advertisements for mobile devices present two new challenges: how to deal with orientation changes and the different aspect ratios of these devices. We have added a few features to our templates to deal with these problems. First of all, templates that contain a fullscreen layer are liquid, so they are set to fill the entire screen. Each fullscreen template contains a "centered content" div, making it easy to create content that is centered as well as content that is positioned with respect to the corners or sides of the screen. This allows you to create fullscreen advertisements that look well on devices with different screen sizes, aspect ratios and different orientations. Of course, you should test your creation on a number of different devices.

In some cases, positioning items with respect to corners, sides or the center might not give you enough control and you may want to create something different for portrait and landscape mode. In that case, use these orientation events.

Catching the orientationChange event

If you want to use the orientation change event in your code, we recommend adding the following code as soon as your document is ready:

screenad.onOrientationChange = onOrientation;

function onOrientation() {
  // Do something when changing orientation.
  // Different actions for portrait and landscape? Check 'screenad.screenorientation'!
  // console.log('onOrientation. Current orientation: '+screenad.screenorientation);
} 

 For more information, check out our API.