Ionic Tab, Screen Resolution & Screen Orientation

Hong Ly
2 min readJan 16, 2021

Tabs make users easy to navigate between different pages or functional aspects of an app as demonstrated in [1]. The Tabs component is written as <ion-tabs>. It is a container of individual Tab components. Each individual ion-tab is a declarative component for a NavController.

Creating tabs in Ionic

Ionic Adapts Different Resolutions

Ionic also works well to adapt different devices’ resolutions. Ionic Lab makes the apps on run on multiple screen sizes and platforms [2] [3].

Ionic works well on different screen sizes [3]

Ionic Screen Orientation

Cordova plugin to lock or set screen orientation in a common way. It needs Cordova a plugin: cordova-plugin-screen-orientation.

To install the Cordova and Ionic Native screen orientation plugins, we need to run the following commands. Then add the plugin to app’s module.

Ionic Screen Orientation [4]

References

[1] “Ionic Framework”, Ionic Framework, 2017. [Online]. Available: https://ionicframework.com/docs/api/components/tabs/Tabs/. [Accessed: 26- Jul- 2017].

[2] “How does Ionic work with different screen sizes?”, Ionic, 2017. [Online]. Available: https://forum.ionicframework.com/t/how-does-ionic-work-with-different-screen-sizes/41028. [Accessed: 26- Jul- 2017].

[3] “Introducing Ionic Lab”, The Official Ionic Blog, 2017. [Online]. Available: http://blog.ionic.io/ionic-lab/. [Accessed: 26- Jul- 2017].

[4] “Ionic Framework”, Ionic Framework, 2017. [Online]. Available: https://ionicframework.com/docs/native/screen-orientation/. [Accessed: 27- Jul- 2017].

--

--