Forum | Appery.io

Currently through the builder you guys are setting the viewport metatag to this;

meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"

However you really should do this:

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

Because once you guys set user-scalable or maximum scale it's difficult to programatically change this on the load event... My suggestion is for you guys to modify the viewport setting to this so that we can apply view port modifications without having to edit the source directly.

if ($(window).width()300){

 $('head meta[name=viewport]').remove();   

 $('', { 
     name: 'viewport', 
     content: 'initial-scale=2, width=device-width' 
 }).appendTo('head'); 

};

Unless there's another solution here, I will have to modify all the source pages to get this to work correctly. My curent solution which requires editing the source is removing the viewport tag manually from the source and adding it back to:

         $(document).bind("mobileinit", function() 
         { 
             if (navigator.userAgent.toLowerCase().indexOf("android") != -1) 
             { 
                 $.mobile.defaultPageTransition = 'none'; 
                 $.mobile.defaultDialogTransition = 'none'; 
             } 
             else if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) 
             { 
                 $.mobile.allowCrossDomainPages = true; 
                 $.support.cors = true; 
             } 

             $('', { 
                 name: 'viewport', 
                 content: 'initial-scale=2 width=device-width' 
             }).appendTo('head'); 

         });

Guys I really need an official response I am a paying customer here.

Hi Miguel -

We will need to consider this with our developers team.

Use Priority support form within the builder for quicker time response.
Menu button (upper right corner) -- Priority support.

Guys ... can you give me an update on this. How is this marked as answered... it still should be in progress.

Miguel,

We are still working on it. The thread is marked as answered if there is at least one reply from an employee.

Miguel,

We use view port what is the most suitable for mobile devices.

If you want to use custom view port we re recommend that you create one-page app (Render all pages in one HTML file, to not replicate action for all pages) and use this JavaScript code on pageinit handler to change view port:
pre
$("meta[name=viewport]").attr("content", "initial-scale=1,maximum-scale=1, user-scalable=no");/pre

Do you understand the circular nature of this problem. How do you do this without editing the source directly, which is the main issue. there's no pageInit/pagecreate event in the ui/builder, so to add it one would have to add it to code it directly in the source, then it would prevent you from making any changes by breaking the ui. The view port is set in every page as it stands now in a mult-page app, so what does it matter if it's changed to something else. My application is quite complicated and not suited to a one pager.

Perhaps I can do the following: Create a backup of my app, import app as new, modify source directly to accommodate this issue, let users use this as the release app, and continue to work on my dev app without breaking ui. Can I do this?

Guys,

Is what I suggested in my previous post seem reasonable? Will it mess anything up? I will likely just edit the viewport meta tag directly so the page isn't loaded twice.

Hello Miguel,

1. You can on Load event use pageinit event, and once it's completed, run necessary code.
2. If you do not like workaround with pageinit, you can use Page Show for example.
3. [quote:]Perhaps I can do the following: Create a backup of my app, import app as new, modify source directly to accommodate this issue, let users use this as the release app, and continue to work on my dev app without breaking ui. Can I do this? [/quote]
   This is also possible.