Webview orientation with Phonegap

I was having this really weird problem in PhoneGap where when the orientation would change the webview would not resize to fit the whole screen.  Turns out that the meta viewport tag was causing the problem.  My viewport setting was this: 1 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> So when I would re-orient my iPad to landscape it would still be using the device-width setting for its width.  So what I did was bind to the orientationchange event and call a JavaScript function

Phonegap build issues

I have had the worst two days.  Here I have my app, Notiffi, pretty much ready to go.  I have it set up in iTunes connect, ready to go.  I am ready for the last step in the process, archiving.  I hit Archive and BOOM.  Nothing.  Build works.  Debug works.  Archive does not work, and it still doesn’t as I’m writing this.  Also, suddenly I start getting linker errors like this when I was building it and so I couldn’t even check to see if the app worked any more.

Transform performance on mobile applications

Just a quick one today.  I have read on several web pages that if you want to speed up the rendering of your site that you need to add -webkit-transform: translate3d(0,0,0) to the page elements to have the browser use the GPU to render the page instead of the CPU. I tried this trick several times and it never seemed to work.  But I think that today I figured out why not. I would apply this trick to a container element that houses the things that were animating.  This may not

External links in phonegap

Found an interesting behavior today.  I have an LI element that has a click handler on it, but that LI element has an A element which has a link.  So it looked kind of like this: 1 2 3 4 5 <ul> <li onclick="doSomething(); "> <A href="http://somewhere" target="_blank">Go</a> </li> </ul><ul> <li onclick="doSomething(); "> <A href="http://somewhere" target="_blank">Go</a> </li> </ul> But when I clicked on the link the event would fire (expectedly) but it wouldn’t open the link in the mobile browser window. Pulled my hair out for a while and then

Handling clicks for mobile platforms [UPDATED]

I’ve been doing a lot of work in Phonegap lately and I really like it.  However, one of the things I don’t like is that click events are really, really slow.  There’s a reason for this.  How does the browser know if it’s a click or the beginning of a move?  The answer to this is to bind your click events to the “touchend” event. So, in JQuery you would previously do something like this. 1 target.bind(’click’, callback);target.bind(‘click’, callback); But that introduces the lag.  So I wrote a little function