An attempt to platform independence compromisation

I got a problem.

I have an application that I hope to be able to: 1) visit directly from its hosting server, and 2) visit on facebook (where it is enclosed in an iframe). I want it to look all right in both a computer and an iphone in both cases.

I was using the following to define the application's width:

var D=navigator.userAgent.toLowerCase();
var x=(D.indexOf("android")!=-1)||(D.indexOf("iphone")!=-1);
this.w0 = x ? (window.innerWidth - 20) : 320;

Use of "window.innerWidth - 20" lets it automatically adjust the width for an iphone. However since facebook embeds my application in an iframe, window.innertWidth will be the width of the iframe window. The application looks big and its bottom half is hidden and covered by the iframe. It does not look right.

I was thinking of letting the application determine if it is in an iframe AND in an iphone, and if so pop up a new window pointing to the original hosting server. Then "window.innerWidth - 20" will adjust the width properly. This failed. It failed because when the application uses parent.location.href to get the parent window, it has permission issue when the application and its enclosing iframe window are on different server. What made it worse, iphone does not allow javascript to pop up a new window, obviously also for security reason.

I thus gave up and use the following:

this.w0 = x ? 300 : 320;

I use 300 because my iphone4 (3G) screen width is 320. This way when visiting facebook in iphone, I still can zoom in the screen to use the application, and it still looks all right to me.

This will look small with larger cell phone screen.

The morale is: platform independence is always a problem. You need different versions for your application :(

iPhone/iPad/android touch event

I have been looking for ways of detecting touch screen events on iPhone comparable to mouse events on a regular computer. I found this today and think it's wonderful. My game now can interact with user on iPhone.

On iPhone/iPad/android, can use the follow replacements for mouse events:
mousedown -> touchstart
mousemove -> touchmove
mouseup -> touchend

In mouse/touch events, obtain page location by:

me.vSelectCanvas.addEventListener('mousedown', function(e) {
  if (e.which == 3) { return; } // do nothing for right mouse button.
  var mouse_x = e.pageX - this.offsetLeft,
      mouse_y = e.pageY - this.offsetTop;
   // ...
}, false);

me.vSelectCanvas.addEventListener('touchstart', function(e) {
  if (e.touches.length == 1) {
    var mouse_x = e.touches[0].pageX - this.offsetLeft,
        mouse_y = e.touches[0].pageY - this.offsetTop;
    // ...
  }
}, false);

To detect browser agent type (regular browser or smart phone) and reset window size:

  var D=navigator.userAgent.toLowerCase();
  var x=(D.indexOf("android")!=-1)||(D.indexOf("iphone")!=-1)||(D.indexOf("ipad")!=-1);
  var d=x?window.innerWidth:900;
  var B=x?window.innerHeight:550;

(See code here)

And here's information on How to get iPad/iPhone screen dimensions in javascript.