Sorry your browser is not supported!

Got a rough prototype of a fitness app I started. Wanted a real basic 30-60 timer but couldn't find one so I'll make it. If you look at the source code, specifically the meta tags, you'll see the code for making the page more app-like. I've already discovered you can't lock screen orientation with a web app. But after rotating my phone about 2 or 3 times, the screen never seems to go back to how it was originally displayed in portrait mode. The display gets smaller. After a few times, the app just crashes. Can anyone else try this and see what happens for them? Also, when viewed in the mobile browser, it's not hiding the browser window like it's suppose to. I add the web app to my home screen so it runs more like a native app.

http://zimnox.com/run

I don't really play with iOS and don't actually have an iOS device to test it with, but one observation looking at the source code is the CSS. I know typically doing responsive webdesign like this, people will tend to use CSS media queries, but I've not made anything that changes based on the orientation, just the screen width. However, I suspect you'll be able to scale it based on a CSS media query, I don't know if it is worth experimenting with.

I don't know how familiar you are with using them, so I'll play it safe and will assume nowt, but don't know if it was intentional or not, so here's a link to some more info on them: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

But the idea is you can use different CSS rulings, based on the width of the screen. But I don't know how much the style is affected by your JavaScript, I'll admit I just had a very quick glance through.

I don't know if the "screen width" value ever changes based on orientation and imagine it would, I feel like it should, but haven't actually tested it.