I have a program (Websmart ILE but could be any really) that creates a web page with a Sidebar that has a Search Box, under that the Search Results, and in the main body of the window a Google Map. The whole thing is written to use Bootstrap and will resize automagically to fit the window size (responsive layout).
What we want to do is to change the format so that if the page is being viewed on a Phone, there is no Sidebar, the Search is in the main Window, the Map underneath, and the search results underneath that.
Bootstrap CSS Classes do allow you to specify which Divs are displayed based on device type (Phone, Tablet, Desktop) and you would normally output some code twice, specifying under which conditions each type would be displayed.
In this case it's not going to be easy to do that, and I would have to duplicate more or less the whole screen.
I wondered if when the program loaded there was a way to check the viewport size (or device) it was called from and going to be displayed on, so that only the correct version of the screen could be output.
Any thoughts please? I hope I explained it clearly enough.
What we want to do is to change the format so that if the page is being viewed on a Phone, there is no Sidebar, the Search is in the main Window, the Map underneath, and the search results underneath that.
Bootstrap CSS Classes do allow you to specify which Divs are displayed based on device type (Phone, Tablet, Desktop) and you would normally output some code twice, specifying under which conditions each type would be displayed.
In this case it's not going to be easy to do that, and I would have to duplicate more or less the whole screen.
I wondered if when the program loaded there was a way to check the viewport size (or device) it was called from and going to be displayed on, so that only the correct version of the screen could be output.
Any thoughts please? I hope I explained it clearly enough.
Comment