How to lock the orientation to portrait mode in a iPhone/Andorid Web Application?

You can specify CSS styles based on viewport orientation: Target the browser with body[orient="landscape"] 
or
body[orient="portrait"]

Try this via the CSS @viewport rule

 @viewport {  
   orientation: portrait;  
 }  

Or

 $(document).ready(function () {  
    $(window)    
      .bind('orientationchange', function(){  
         if (window.orientation % 180 == 0){  
           $(document.body).css("-webkit-transform-origin", "")  
             .css("-webkit-transform", "");          
         }   
         else {            
           if ( window.orientation > 0) { //clockwise  
            $(document.body).css("-webkit-transform-origin", "200px 190px")  
             .css("-webkit-transform", "rotate(-90deg)");   
           }  
           else {  
            $(document.body).css("-webkit-transform-origin", "280px 190px")  
             .css("-webkit-transform", "rotate(90deg)");   
           }  
         }  
       })  
      .trigger('orientationchange');   
 });