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.
Viewport size is not static. It can change... for example, in Windows you can easily change the size of the browser window while the application screen is being displayed.
CSS3 media queries allow you to dynamically adjust the screen size by using different elements of the style sheet (or different style sheets completely) based on ranges of widths/heights of the viewport size. This is a good approach -- but I'm not familiar with "Bootstrap", and do not know how it differs.
You could potentially have JS logic to add/remove elements, resize things, etc.Code:var viewportWidth = document.documentElement.clientWidth; var viewportHeight = document.documentElement.clientHeight;
However, I don't think there's a way to know the screen size in advance of displaying the page. You need to have logic like one of the above methods running on the client -- because screen size is not communicated from the client to the server (and even if it were, it could change on-the-fly.)
Another approach might be to set the width/top/left attributes of screen elements based on a percentage. This would allow you to create screens that expand to the size of the viewport (whatever it might happen to be.)
Bootstrap (from Twitter) does have CSS Classes that allow you to turn on/off divs depending on device type, which make it very easy.
Maybe I could store whether they are using a phone or not as a cookie. That might work.
If "device type" (as opposed to screen size) is acceptable, it should be possible to figure it out from the user-agent that's sent with the HTTP request. You'd need to maintain a file with a list of devices and which ones would get the special screen size -- this would be a bit of a hassle -- but is possible.
That might work, thanks Scott.