To incorporate a CanvasPane graphic in a mobile Px page, simply copy the CanvasPane from the existing Px page and paste it into the BasicMobilePane or a MobileGridPane on your mobile page.

Keep in mind that not all widgets will display correctly in Mobile Px. Basic widgets like Labels, Pictures and Buttons are all supported, but some Workbench-only custom widgets, such as bajaui:PxIncludes and kitPx:AnalogMeter, are not supported and will not display on a mobile page. For a complete list of supported widgets, see Field editors, widgets, and bindings supported in Mobile Px.

Some editing will likely be necessary to get your existing Px pages looking perfect on mobile devices, but using a copy+paste+tweak approach is easier and faster than recreating mobile-specific versions of your graphics.

Adding a properly configured CanvasPane to a BasicMobilePane automatically scales child widgets based on the available screen resolution. However, this automatic scaling behavior may cause Px views to shrink to an undesirably small size when displayed on mobile devices that have fairly small screens.

Another option is to use a more typical Px view which has a ScrollPane as the root widget with a child CanvasPane configured for no scaling. Provided the media type for the Px view is configured for mobile, the Px view will be accessible when logged in using a mobile profile in a browser. In this case, the Px view does not automatically scale to fit the available screen resolution. Instead, the Px view renders based on the size of the canvas pane and you can use “one finger scrolling” to see all of the content.