1. Configure the widget page to be full screen and non-scalable using the viewport meta tag
<meta name="viewport" content="height=device-height, width=device-width,2. Import the CEA widget toolkit
initial-scale=1, maximum-scale=1, user-scalable=no"/>
<script type="text/javascript" src="./ceadojo/dojo/dojo.js"3. Add the CSS for the mobile cobrowse widget
djConfig="parseOnLoad: true, isDebug: false"></script>
<style type="text/css">
@import "ceadojo/dijit/themes/tundra/tundra.css";
@import "ceadojo/dojox/mobile/themes/iphone/iphone.css";
@import "ceadojo/cea/mobile/widget/Cobrowse/Cobrowse.css";
@import "ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";
@import "ceadojo/cea/mobile/widget/iFrame/iFrame.css";
</style>
<script type="text/javascript">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>
<body class="tundra mbl iphone">
<div ceadojoType="cea.mobile.widget.Cobrowse" joinCollaborationUri="/cea/cobrowse.html"
defaultCollaborationUri="/"></div>
</body>
Thanks to Steps 1 and 4 when the page loads in the mobile browser it will display full screen as well as scrolling to hide the location bar. This gives the widget an 'app-like' look and feel as well as allows the user to take advantage of all the screen real estate offered by their device.
0 comments:
Post a Comment