title: How to disable toggling of landscape/portrait on a mobile web app (Android Browser/iOS-Mobile Safari)
body: <p>I am trying to disable phone rotation affecting the web page of one of my HTML5 mobile apps. No reorganizing of the layout, resizing, orientationchange behavior.</p>
  
  <p>I want it so that you rotate the phone and the initial layout loaded will stay the same, forcing the user into using the app in the original orientation. There are many subtleties to user logic and I truly feel this is needed in my app, so please no comments on that choice, rather help for my question in the first sentence.</p>
  
  <ol>
  <li><p>I tried listening for BOTH 'orientationchange' and 'resize' events and calling preventDefault and stopPropagation on them, to prevent any browser behavior of reorganizing the page to fit a landscape view when turned. Well, obviously preventing ANYTHING (ideally). </p>
  
  <pre><code>window.addEventListener("orientationchange", function (e) {
  e.preventDefault();
  e.stopPropagation();
  }, false);
  
  window.addEventListener("resize", function (e) {
  e.preventDefault();
  e.stopPropagation();
  }, false);
  </code></pre></li>
  </ol>
  
  <p>Made absolutely no difference. Browser still reorganized the page on Android (both pre2.1 and after) and iPhone 4-5.</p>
  
  <ol>
  <li><p>tried meta tags </p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no /&gt;
  </code></pre>
  
  <p>then got pissed, tried</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /&gt;
  </code></pre>
  
  <p>neither made a difference.</p></li>
  <li><p>looked furiously on StackOverflow, saw what I did in step 1. put out there several times...tried again to make sure I wasn't messing something up. Didn't work.</p></li>
  <li><p>sucked in my pride, then decided to keep running into a brick wall due to pride, then really sucked in my pride and posted here.</p></li>
  </ol>
  
  <p>HALP.</p>