Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><a href="http://snook.ca/" rel="noreferrer">Jonathan Snook</a> has a work around to this problem. In his slides <a href="http://www.slideshare.net/jonathansnook/fake-it-til-you-make-it" rel="noreferrer">here</a>, he shows how to (sort of) lock to portrait (see slide 54 and 55).</p> <p>The JS code from those slides:</p> <pre><code>window.addEventListener('orientationchange', function () { if (window.orientation == -90) { document.getElementById('orient').className = 'orientright'; } if (window.orientation == 90) { document.getElementById('orient').className = 'orientleft'; } if (window.orientation == 0) { document.getElementById('orient').className = ''; } }, true); </code></pre> <p>and the CSS:</p> <pre><code>.orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px; } .orientright #shell { -webkit-transform: rotate(90deg); -webkit-transform-origin:230px 230px; } </code></pre> <p>I tried to get this working for <strong><em>landscape</em></strong> on the iPhone, but it never looked 100% correct. I came close with the following jQueryian code, however. This would be within the onready function. Also note: this was within a "saved to homescreen" context, and I think that altered the position of the tranform-origin.</p> <pre><code>$(window).bind('orientationchange', function(e, onready){ if(onready){ $(document.body).addClass('portrait-onready'); } if (Math.abs(window.orientation) != 90){ $(document.body).addClass('portrait'); } else { $(document.body).removeClass('portrait').removeClass('portrait-onready'); } }); $(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure </code></pre> <p>And the CSS:</p> <pre><code>.portrait { -webkit-transform: rotate(90deg); -webkit-transform-origin: 200px 190px; } .portrait-onready { -webkit-transform: rotate(90deg); -webkit-transform-origin: 165px 150px; } </code></pre> <p>Hope that helps someone get close to the desired result...</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload