Miguel Navarro7469744
Posts: 0
Joined: Mon Apr 06, 2015 4:55 pm

How to do jquery mobileinit without directly editing source

Guys,

I'm having an issue with JQM not respecting changes to the viewport meta tag:

https://forum.jquery.com/topic/jqm-hi...

There are currently two workaround for this one being to move the metatag below scripts or to remove it and add it during mobileinit. I have tried mobileinit and it seems to work well. I have tried using CSS with @viewport and it didn't work.

It seems either solution requires some modification to source. It would be nice if you guys could setup areas of the page where we can modify sections of source but the UI still works so we can get around these issues. Otherwise it starts to get to a point where more advance users think about moving off the platform.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to do jquery mobileinit without directly editing source

Hello Miguel,

There are impossible to change source without stopping UI. Why don't you want to use mobileinit?

Miguel Navarro7469744
Posts: 0
Joined: Mon Apr 06, 2015 4:55 pm

How to do jquery mobileinit without directly editing source

I do want to use mobileinit but that requires editing source. Is there an appery.io equivalent function? beforeload?

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to do jquery mobileinit without directly editing source

You can use event "device ready" or "before load instead" of "mobileinit".

Miguel Navarro7469744
Posts: 0
Joined: Mon Apr 06, 2015 4:55 pm

How to do jquery mobileinit without directly editing source

The beforeLoad event doesn't appear to work and I tried device ready.

I need to update the viewport meta tag. I have tried numerous ways to modify it but I am not able to get the page to repaint itself. For example I did this on the load event:

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

Code: Select all

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

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

};

How can I modify the viewport and get the page to repaint? The only way I have gotten to to work is if I set the viewport meta tag content to "" this way. Otherwise I have to remove the meta tag manually and use mobileInit to add it like this:

Code: Select all

     $(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'); 

         });

Return to “Issues”