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

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. 一个很好的图像通知

(更新截至04-2018 :(因为我刚看到我的帖子,我想到了更简单的东西..)使用媒体查询.几乎与下面相同,但不使用Javascript,使用css,默认隐藏元素并在方向为横向时显示→@media(方向:横向){...})

只需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;
 }
});

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