While demos are optimized for web browsers, you can also set your demo to be viewable on mobile phones!
Setting Up The Mobile View
Open up the template settings by clicking on the gear wheel in the top right corner of the editor. Then open the Display Options tab.
First set your display options to Proportional fit or Fixed Width. This will ensure your screen scales proportionally to the browser its viewed on, or according to the width you set. With these display settings set, you can then toggle on the mobile screen view below.
Hit save and enjoy viewing the demo on your mobile phone! When viewed in portrait mode, the demo guides will appear beneath the template screen.
When viewed in landscape mode, the demo guides will appear over their selected elements.
Important to Note 📝
- The mobile view toggle is not supported with the Dynamic screen size display option. Templates must be set to Proportional Fit or Fixed Width.The mobile view works both in landscape and portrait mode.
- The following Walnut features are not supported when viewing demos on mobile:
- Viewer Comments
- Presenter Notes
- Floating Demo Button
- Guides toolbar
- To preview the demo in the mobile view, you will need to first create and publish the template and then open the demo link on your mobile device.
-
When embedding the demo on a mobile website, the ideal iFrame size is fit to width and the height-to-width ratio is 5:6.
See it in action: