Viewport width NG-client

[j.boonstra]

I am trying out the responsive lay-out of the NG-client. Everything works like expected when I resize my browser on my desktop, but when I try it on my mobile phone which in my case has a 360 px width (tested with responsive site http://benfrain.com/easily-display-the- ... e-designs/ ), the NG-client has a width of 980 px. Looks like the device width is somehow overruled or not taken into account, so the responsive lay-out doesn't work and I get a form with scroll bar or complete with really small content. Has anyone ideas how to fix this?

[j.boonstra]

Found out why this happens. On Android the default is to use a wide view port (980 px) instead of the device width. To use the device width you have to include a meta tag like:

Code: Select all

<meta content="width=device-width, initial-scale=1" name="viewport">

in your html header. How can I add this in the NG-client?

[sbutler]

We do it with some client side JS. To do that in Servoy 8, you would make an NG Service. Below is ours. Also, this will be part of the upcomming ServoyU tutorials I'm working on. Essentially, where you would previously use WebClientUtils in Servoy 7 and prior, you now use NG Services to run client-side JS.

This particular examples shows how to at a meta tag to the header for setting the viewport.

Right-Click on NG Services (Under Resources), and choose "Create Service Package"

Package Name: utilsservices
Service Name: utils

utils.js:

Code: Select all

angular.module('utilsservicesUtils',['servoy'])
.factory("utilsservicesUtils",function($services)
{
   var scope = $services.getServiceScope('utilsservicesUtils');
   return {
      setViewport: function(content) {
         var meta = document.createElement('meta');
         meta.content = content;
         meta.name = "viewport"
         document.getElementsByTagName('head')[0].appendChild(meta);
      }
   }
})
.run(function($rootScope,$services)
{
   var scope = $services.getServiceScope('utilsservicesUtils')
   scope.$watch('model', function(newvalue,oldvalue) {
   // handle state changes
      console.log(newvalue)
}, true);
})

utils.spec:

Code: Select all

{
   "name": "utilsservicesUtils",
   "displayName": "utils",
   "version": 1,
   "definition": "utilsservices/utils/utils.js",
   "libraries": [],
   "model":
   {
       "text": "string"
   },
   "api":
   {
      "setViewport":
      {
         "parameters":
          [
             {
               "name":"content",
               "type":"string"
            }
         ]
      }
   }
}

Now, in your Solution onOpen method, you'll run:

Code: Select all

plugins.utilsservicesUtils.setViewport("width=device-width, initial-scale=1")

[j.boonstra]

Thanks, that does the trick.