rotation - 网站可以强制设备旋转锁定吗？

Question

我目前正在开发一个对所有设备都相对平等的网站；桌面和移动设备。我正在与 % 合作，因为我认为这是最好的选择。

它基于纵向模式。如果您将设备更改为横向，整个网站看起来就像一个胖侏儒。

所以我想知道:是否有可能锁定网站，使其始终以纵向显示？

我的意思是:设备旋转已锁定。并不是说当进入横向时，网站会返回到纵向，而在横向时。 (我已经在 StackOverflow 上看到了一些代码。)

Check my site at: http://prototyping.iscs.nl/mobiel.html 

供引用:)

提前致谢

Answer 1

在对旧问题('12)的更新中，我认为这可以帮助很多人!

我还没有找到锁定设备旋转的真正方法，但想出了一个完美的替代方案，我也见过一些人这样做。

选项 A。一个简单的警报

通过使用简单的 jQuery 脚本，您可以检测设备的方向。

if(window.innerHeight > window.innerWidth){
  alert("Please use Landscape!");
}

嗯，一个简单的警报很容易，但通知可以更好!

选项 B。一个漂亮的图片通知

(截至 2018 年 4 月更新:(因为我刚刚再次看到我的帖子，我想到了一些更简单的事情..)使用媒体查询。与下面几乎相同，但不是使用Javascript，使用css，默认隐藏元素，方向为横向时显示 → @media (orientation: Landscape) {...})

只需向页面添加一个 fixed 元素，该元素会在方向更改时显示。

HTML

<div class="turnDeviceNotification"></div>

CSS

.turnDeviceNotification {
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
}

您可以使用文本更新此元素，或者只需将其连接到背景图像

.turnDeviceNotification {
  background-image:url('../images/turnDevice.jpg');
  background-size:cover;
}

只需向您的图像文件夹添加一个漂亮的背景，如下所示。

注意到该对象有一个 display: none 吗？那是因为否则即使在纵向模式下它也会显示。现在，您需要做的就是使用下面的脚本，因此该对象仅以横向模式显示。

jQuery(window).bind('orientationchange', function(e) {
 switch ( window.orientation ) {
  case 0:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 180:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;

  case -90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;
 }
});

仅当设备方向更改为横向时才会显示通知。