CODEWITHSUNDEEP
androidiphonewindows-phone-8mobile-website
0fnt
0fnt

Reputation: 8661

Force browser screen orientation

I'd like to display my website only in landscape mode when viewed from modern smartphones. Is there a way to force the major mobile browsers- Chrome/Firefox/Safari/IE10 to do so? Basically I'd like them to start the browser in landscape mode, irrespective of screen orientation and rotation lock.

Is it too much to ask? I think not because certainly there are games that only play in landscape mode, and the Windows Phone UI home screen uses only portrait mode.

Upvotes: 0

Views: 1508

Answers (1)

Sazid
Sazid

Reputation: 2827

Well, you can't force browsers orientation to landscape, but you sure can try to detect device orientation and suggest the user to rotate his/her device (through a full screen <div> and hide it when the user rotated the display)!

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

Then add the appropriate listeners once you know device orientation is supported:

if (window.DeviceOrientationEvent) {
  // Listen for the event and handle DeviceOrientationEvent object
  window.addEventListener('deviceorientation', devOrientHandler, false);
}

Then, handle the event:

if (window.DeviceOrientationEvent) {
  document.getElementById("doEvent").innerHTML = "DeviceOrientation";
  // Listen for the deviceorientation event and handle the raw data
  window.addEventListener('deviceorientation', function(eventData) {
    // gamma is the left-to-right tilt in degrees, where right is positive
    var tiltLR = eventData.gamma;

    // beta is the front-to-back tilt in degrees, where front is positive
    var tiltFB = eventData.beta;

    // alpha is the compass direction the device is facing in degrees
    var dir = eventData.alpha

    // call our orientation event handler
    deviceOrientationHandler(tiltLR, tiltFB, dir);
  }, false);
} else {
  document.getElementById("doEvent").innerHTML = "Not supported."
}

...and display the result (i.e hide the full screen suggestion <div>)!

document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);
document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);
document.getElementById("doDirection").innerHTML = Math.round(dir);

// Apply the transform to the image
var logo = document.getElementById("imgLogo");
logo.style.webkitTransform =
  "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
logo.style.MozTransform = "rotate("+ tiltLR +"deg)";
logo.style.transform =
  "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";

Reference: http://www.html5rocks.com/en/tutorials/device/orientation/

Hope that helped :)

Upvotes: 2

Related Questions