Flipping web app between mobile & desktop views

I have a web app which has 2 sets of pages, 1 for desktop browsers, and 1 for mobile browsers. My Session.PrepareSession event contains code which sets the HTMLHeader to optimize the “viewport” settings for whichever browser platform is detected.

All of this works just fine, but…

I want to provide mobile users with a “view desktop site” option.

Trouble is, while I can easily direct the user to the relevant desktop webpage, I cannot find any way to change the HTMLHeader once the Session has been opened. Any ideas??

[quote=191724:@Tony Davies]I have a web app which has 2 sets of pages, 1 for desktop browsers, and 1 for mobile browsers. My Session.PrepareSession event contains code which sets the HTMLHeader to optimize the “viewport” settings for whichever browser platform is detected.

All of this works just fine, but…

I want to provide mobile users with a “view desktop site” option.

Trouble is, while I can easily direct the user to the relevant desktop webpage, I cannot find any way to change the HTMLHeader once the Session has been opened. Any ideas??[/quote]

If you offer to switch at a non critical navigation point, ShowURL your app with a parameter that forces the Desktop mode, and tells which page to go to. Something like
127.0.0.1:8080?mode=desktop&page=2

In PrepareSession you use URLParameter to set the appropriate header

In Open you put something like

if URLParameter("mode") = "desktop" then DesktopWebpage.show end if

This will exit the current session and start a new one with the Desktop mode. You can do the same the other way to come back to mobile pages.

Thanks Michel,
I did think about doing this procedure, but I wanted to avoid creating a new session, because my users will probably be logged in through a security window, and I wanted to avoid forcing them to login again, just for flipping view modes.

I would be so handy to modifiy HTMLHeader on the fly…

[quote=193281:@Tony Davies]Thanks Michel,
I did think about doing this procedure, but I wanted to avoid creating a new session, because my users will probably be logged in through a security window, and I wanted to avoid forcing them to login again, just for flipping view modes.

I would be so handy to modifiy HTMLHeader on the fly…[/quote]

I got a solution, but it is a third party tool I sell : RubberViewsWE Auto Layout enables a web app to shuffle controls around according to the device orientation. See http://rubberviews.com/cgi-bin/rubberviewswe/rubberviewswe.cgi and click the green button top left “Autosize+Auto Layout”. You can download a demo project from http://rubberviews.com

That would be the easiest way to do what you want without starting a new session.

Alternatively, you can probably do something similar in code by moving controls on the page depending on a session property.

To be complete, seems the viewport can be changed in JavaScript (untested) :
http://www.webdevdoor.com/responsive-web-design/change-viewport-meta-tag-javascript/

[quote=191724:@Tony Davies]I have a web app which has 2 sets of pages, 1 for desktop browsers, and 1 for mobile browsers. My Session.PrepareSession event contains code which sets the HTMLHeader to optimize the “viewport” settings for whichever browser platform is detected.

All of this works just fine, but…

I want to provide mobile users with a “view desktop site” option.

Trouble is, while I can easily direct the user to the relevant desktop webpage, I cannot find any way to change the HTMLHeader once the Session has been opened. Any ideas??[/quote]
Would you please share some parts of your code that halps to dectect browser type and preparing different pages according to browser size.

Thank you in advance

Here’s a sample code that detects the browser type.

  Select Case Self.Browser
  Case WebSession.BrowserType.Android
    // Code
  Case WebSession.BrowserType.Blackberry
    // Code
  Case WebSession.BrowserType.Chrome
    // Code
  Case WebSession.BrowserType.ChromeOS
    // Code
  Case WebSession.BrowserType.Firefox
    // Code
  Case WebSession.BrowserType.InternetExplorer
    // Code
  Case WebSession.BrowserType.Opera
    // Code
  Case WebSession.BrowserType.OperaMini
    // Code
  Case WebSession.BrowserType.Safari
    // Code
  Case WebSession.BrowserType.SafariMobile
    // Code
  Case WebSession.BrowserType.Unknown
    // Code
  End Select