Most devices support screen orientation changes. Devices may have a portrait or landscape orientation. Proto.io allows you to create prototypes that support orientation changes and present your prototype in both orientations.
The proper way for handling screen orientations
When adding a project you need to define the default orientation of your device. The reason for that is to display that orientation when you launch the preview of the app on the Proto.io Player (web) or in the Proto.io App. When you add a screen in Proto.io you need to specify the orientation of the screen. If you want to present the same content of a screen in portrait and landscape then you need to create two different screens, one with portrait orientation and one with landscape orientation. This may sound frustrating as you need to build a screen for each orientation and reorganize the items on your screen, but in most cases, orientations have different layouts rather than a mere reposition and resizing of UI elements. The way you link two orientation screens to each other so that when you rotate your device the other screen appears is by using the screen interaction event “On orientation change” and setting an action “Go to page”. This has to be done on both screens.
Switching orientation in Proto.io Player
When you want to switch orientation on the player you can do that by pressing the orientation button at the bottom toolbar. If the “Orientation change” event is set up properly then it gets triggered and executes the interaction. If not, the UI items are re-rendered on the screen and may respond to the new screen dimensions if “auto” width/height has been used. On the actual device, you just need to turn your device to change orientation and the same actions will apply as they do on the web player.
