cf2:viewport

Purpose

This component provides methods that return information about the usable width and height, mode and orientation of the device viewport.

Exported Features

cf2:viewport

Imported Features

n/a

JavaScript

This component is provided by the V$.viewport class. The class contains the following methods:

mode()

Returns the current viewport mode. The possible values are: 'fullscreen' and 'chrome'. 'chrome' indicates that the parts of the browser such as tool bars, title bars, menus, etc., are displayed; 'fullscreen' means that these elements are hidden.

modes()

Returns an array of the viewport modes supported by the device.

orientation()

Returns the current viewport orientation. The possible values are: 'landscape' and 'portrait'.

orientations()

Returns an array of the viewport orientations supported by the device.

size()

Returns the usable width and height of the viewport (in logical pixels) in its current state. The screen dimensions are returned as a Map, where w stores the width of the screen, and h its height.

Note:

The usable viewport dimensions include the vertical and horizontal scrollbars that can appear/disappear depending on the page size.

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:event="http://www.w3.org/2001/xml-events"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
  xmlns:sel="http://www.w3.org/2004/06/diselect">
  <head>
    <title>cf2:viewport</title>
    <style type="text/css">
      .warrning{
        color : red;
        font-weight:bold;
        font-size: 20px;
      }
      ui|button {
        background-color: red;
        display: block;
        color: white;
        text-align: center;
        padding: 30px;
        font-weight:bold;
        font-size: 20px;
        margin: 10px
      }
    </style>
    <mcs:script src="/scripts/viewport.mscr"/>
  </head>
  <body>
    <div>
      <sel:select>
        <sel:when expr="mcs:feature('cf2:viewport')">
          <mcs:script type="text/javascript">
            function showDimentions() {
              view = new V$.viewport();
              var message = "[Modes: " + view.modes();
              message = message + "] [Orientations: " + view.orientations();
              message = message + "] [Current Mode: " + view.mode();
              message = message + "] [Current Orientation: " + view.orientation();
              var map = view.size();
              message = message + "] [Window Size: " + "w-> " + map["w"] + " h-> " + map["h"] + "]";
              return message;
            }</mcs:script>
          <div id="myCxButton1">
            <ui:button>
              <span>Check Viewport Dimensions</span>
              <cf2:on event="cf2:activate"> alert(showDimentions()); </cf2:on>
            </ui:button>
          </div>
        </sel:when>
        <sel:otherwise>
          <div class="warrning">Viewport feature is not supported</div>
        </sel:otherwise>
      </sel:select>
    </div>
  </body>
</html>

Where, the viewport.mscr script module imports the cf2:viewport feature.

Related topics