Question

Possible Duplicate:
Mobile site – force landscape only / no auto-rotate

I have seen a few posts about this but not really found a definitive answer, rather a few suggested workarounds.

Is it possible to force the device orientation via a webpage? I.e: can I ‘jam’ my site as landscape?

Thanks very much

Answer 1

You can with JavaScript. First check if it is supported:

if (window.DeviceOrientationEvent) {
    console.log("DeviceOrientation is supported");
}

Then add eventListener if you want to do something on rotation:

window.addEventListener('deviceorientation', function(eventData) {});

I guess you should trigger your side to respond when it is turned. You can’t trigger the orientation, because the device does that. So when your website loads in landscape mode, you should detect it and render the site in Landscape-mode (load a custom css?) and then when the visitor turns his phone or tablet the listener can re-render your site with a new CSS file through JavaScript (jQuery advised for these situations).

What you can also do it the site hasn’t much dynamics in it, you can just re-load the page with GET method call to change the orientation, but off course this can be a slower option. Re-rendering a whole website with JavaScript on a mobile device very often can even heat up the phone for what I tested before on my iPhone. The JavaScript engine is fast and pulls out much CPU to render everything smoothly, but also eats many resources in a short time, making it hard for a mobile device to constantly keep the renderings up. Best example for this is when making a HTML5 game with JavaScript calls. An iPhone can eventually heat up like playing a game in an actually App :P.