Search code examples
javascriptiphonemobilewavemaker

Forcing desktop display on a mobile device

I am using WaveMaker 6.7 to develop an app that will work well on the desktop and mobile devices like an iPhone without having to create special code just for mobile devices. I've found that with this version of WaveMaker, there are many problems with the mobile displays like:

  • Scrolling doesn't work well
  • Form fields are cutoff at screen width even when the widget is defined using widths in px.
  • Grids aren't fully functional (missing background colors and can't sort by column header.

I spent many hours trying to correct this with css and found that forcing the desktop version to override the automatic detection of a phone worked perfect. Today's mobile browsers are fully functional and don't really need any special widgets. So, by passing the following parm, I was able to override the detection of a mobile device and force the desktop version on an iPhone:

wmmobile=desktop

http://xx.xx.xx.xx/WMappName/?wmmobile=desktop

This displayed my application perfectly on my iPhone and it was exactly the same as the desktop version which is what I was looking for.

My question is can I for the desktop version programmatically without having to pas the wmmobile=desktop parm?? Here is what I've tried so far:

dojo.declare("Main", wm.Page, {
  if (wm.isMobile) {
    alert('Device Detected: ' + wm.device);
    wm.device='desktop';
  }
}

section but I believe that happens too late in the process. Because when I access my app using the following without the wmmobile parm, the application comes up with wm.device=phone instead of desktop:

http://xx.xx.xx.xx/WMappName/

So, I want to be able to access the app using the above URL and force the desktop and override phone.

Anyone have an idea of how to get around this issue without having to pass the wmmobile=desktop parm???

Solution

  • The correct place to override the behavior for setting wm.isMobile flag and wm.device is in <Project Name>/webapps/boot.js script. You can modify this in your project to programmatically set these items the way you want.