How can I fix the webpage orientation to Portrait only for iPad and iPhone?

Question

I have developed a web app/website for the iPad but I can not get it stay in a fixed portrait view only.

I do not want it to rotate and work in landscape mode, because of the way the app has been designed.

I've tried various configurations of the viewport settings but that still has not worked.

I'm not very good at JavaScript so a copy paste option would be best or something in CSS/HTML.

Thanks in advance.

Solution

Unfortunately, there is no way to explicitly "lock" the orientation of a web-app in Mobile Safari, as you can also see from the link that Alex posted above in the comment:

How do I lock the orientation to portrait mode in a iPhone Web Application?

However, you can have multiple CSS files for different screen orientations. There's a handy JavaScript snippet that you can copy-paste here:

http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites

This should at least allow you to design around the rotation without having to use JS but just CSS.