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

Question

我目前正在开发一个对所有设备都相对平等的网站;桌面电脑移动。我正在使用％，因为我认为这是最好的选择。

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

所以我想知道：是否有可能锁定一个网站，一直以纵向显示它？

就此而言，我的意思是：设备旋转锁定。并不是说，当去景观时，网站返回到肖像，而在景观。 （我已经在StackOverflow上看到了一些代码。）

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

供参考：）

提前致谢

Answer 1

在更新旧问题时，我认为这可以帮助很多人！

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

选项A. 一个简单警报

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

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

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

选项B. 一个不错的图像通知

（更新截至04-2018 :(因为我刚看到我的帖子，我想到了更简单的事情......）使用媒体查询。几乎与下面相同，但不是使用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;
 }
});

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

Answer 2

不可能。锁定旋转是设备设置：http://support.apple.com/kb/HT4085 如果没有被设备锁定，浏览器将会旋转，因为您的内容在浏览器中，所以内容也会旋转。 也许视口将有助于解决您的问题：＆lt; meta name =“viewport”content =“width = device-width”/＆gt;“。我看到你错过了那个元标记。

Answer 3

我认为不可能，但有几种方法可以解决

js方式：window.DeviceOrientationEvent

css方式

@media (orientation: landscape) { body { background-color: black; } }

Answer 4

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

来源：https://css-tricks.com/snippets/css/orientation-lock/

Answer 5

目前尚不可能。但是另一种方法是

使用CSS ， 媒体查询有助于横向查看正常工作。

bash非常重要，好像您没有指定它一样。对于某些移动设备，如果您专注于表单字段，则会打开键盘 >，这基本上改变了视口的高度，基本上触发了景观媒体查询。因此，min-aspect-ratio对于景观媒体查询非常重要。

min-aspect-ratio: 13/9

使用JavaScript ，我们可以使用screen.availHeight，因为键盘显示时屏幕高度不会改变。还必须添加更多检查以允许桌面视图跟随。

@media only screen and (min-width: 320px) and (max-width: 1023px) and (min-aspect-ratio: 13/9) and (orientation: landscape) {
    // Landscape view properties
}