强制浏览器屏幕方向

Question

我想在现代智能手机上以横屏模式显示我的网站。有没有办法强制主要的移动浏览器 - Chrome/Firefox/Safari/IE10 这样做？基本上我希望他们以横向模式启动浏览器，而不考虑屏幕方向和旋转锁定。

是不是问的太多了？我认为不是，因为肯定有游戏只能在横向模式下玩，Windows Phone UI 主屏幕仅使用纵向模式。

Answer 1

好吧，你不能强制浏览器方向为横向，但你确实可以尝试检测设备方向并建议用户旋转 his/her 设备（通过全屏 <div> 并隐藏当用户旋转显示器时它）！

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

然后在知道支持设备方向后添加适当的侦听器：

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

然后，处理事件：

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."
}

...并显示结果（即隐藏全屏建议 <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)";

参考： http://www.html5rocks.com/en/tutorials/device/orientation/

希望对您有所帮助:)

强制浏览器屏幕方向

Force browser screen orientation

iphone

android

mobile-website

windows-phone-8