lockViewportWindow Method

This method guarantees that the values you send in are always completely visible and the smaller dimension will be filled completely.

intel.xdk.display.lockViewportWindow(widthPortrait,heightPortrait,widthLandscape,heightLandscape);

Description:

IMPORTANT NOTE: This method calls useViewport internally, so you should NOT use lockViewportWindow and useViewport together.

This method guarantees that the values you send in are always completely visible and the smaller dimension will be filled completely. The placement will always be to the top, left (0,0) which means that there will be extra visible space on the right(landscape) and the bottom(portrait) on devices that have a higher aspect ratio.

This will scale up or down accordingly, but is mainly intended to be used to scale down as a best practice.

It is suggested that you design for iPad since it has the lowest aspect ratio and then scale down to any other device. The iPad settings would be:
intel.xdk.display.lockViewportWindow(768,1004,1024,748);

Available Platforms:

Parameters:

  • widthPortrait: The width to set the Viewport window to display at in pixels when the device is in portrait orientation.
  • heightPortrait: The height to set the Viewport window to display at in pixels when the device is in portrait orientation.
  • widthLandscape: The width to set the Viewport window to display at in pixels when the device is in landscape orientation.
  • heightLandscape: The height to set the Viewport window to display at in pixels when the device is in landscape orientation.

Example:


//use lockViewportWindow to guarantee that the screen is completely visible with the smaller dimension completely filled.  Size for iPad.
var iPortraitWidth=768;
var iPortraitHeight=1004;
var iLandscapeWidth=1024;
var iLandscapeHeight=748;
intel.xdk.display.lockViewportWindow(iPortraitWidth,iPortraitHeight,iLandscapeWidth,iLandscapeHeight);
            
For more complete information about compiler optimizations, see our Optimization Notice.