Question

从现代智能手机查看时，我只想以横向模式显示我的网站。有没有办法强制主要的移动浏览器 - Chrome / Firefox / Safari / IE10这样做？基本上我喜欢他们以横向模式启动浏览器，无论屏幕方向和旋转锁定如何。

要问太多了吗？我想不是因为肯定有游戏只能在横向模式下播放，而Windows Phone UI主屏幕只使用纵向模式。

Answer 1

嗯，您无法强制浏览器定位到横向，但您确定可以尝试检测设备方向并建议用户旋转他/她的设备（通过全屏<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/

希望有所帮助：）

强制浏览器屏幕方向

1 个答案: