[Question] Showing 2 Pages at the same time? (Media Query?)


I’m fairly new to ionic 2 but I have gotten the basic outline and functionality of my app. I wanted to ask if anybody knows how to handle media queries in ionic 2 for viewing the app on different kinds of devices.

My idea was to have the following situation when viewing the app on the phone vs. tablet (landscape & portrait).

Situation 1: When using the app on the phone or tablet (in portrait mode), the “ListView” will be shown with a few items. When an item is clicked, it goes to a new page corresponding to the list item, with a back button on the top left of the screen. This is just standard page navigation so it isn’t too hard.
Situation 2: When using the app on a tablet (in landscape mode), I would like to have these 2 pages side by side. The “ListView” would be on the left-hand side of the screen, and the item content when an item is clicked would be on the right-hand side of the screen. This is the part I need some assistance.

Any guidance on how to approach this or any sample code would be greatly appreciated!

Here is my sketch of the intended functionality while I was designing.


I am wrestling with the same problem.

It seems like all of the Ionic examples are assuming an iPad is just a reactive grid or an enlarged iPhone page. Almost all apps that are optimized for the tablet size include some form of list/detail or other split screen pages. The menu approach in Ionic does not work because it is too tightly tied to side menus.