0

I have created completly HTML 5/CSS/jQuery-based fullscreen Web Application, with trying to make it compatible for all mobile devices (Contents are scaled depending on users Window-height/width of the browser).

So I did the following:

  1. Used only jQuery for the JavaScript part to stay compatible
  2. For the navigation, I used touch-compatible (ontouchstart, ontouchmove, etc.) jQuery Plugins
  3. Used the following meta tag, because the device should never scale the application, because all resizing is done by jQuery:

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

The application works great on all Desktop Browsers on Windows and MacOSX, iPhone, Android, or stupid iPad emulators on the Web, but not on a real iPad (Tested on iPad 2). The iPad is constantly tries to resize the App, the Image is scaled to fullscreen and absolutly positioned elements seem not to appear.

Is there a way to "normalize" the behavior of the iPad to act like an iPhone or a just a normal browser with jQuery? Does anybody know another way or tutorial how to deal with iPad stupidities?

Blackbam
  • 17,496
  • 26
  • 97
  • 150
  • I guess you should link to a fiddle or the actual project and include the code that causes trouble in the question, especially the parts which are important for that large image and the absolutely positioned elements. – insertusernamehere May 13 '13 at 11:16
  • Well I tried to avoid, but I think a website which will be public anyway can be posted publicly. Here is a link to the test project with test contents: http://www.blackbam.at/energiewelt/ – Blackbam May 13 '13 at 11:29

0 Answers0