9

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

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

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

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

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

以供参考 ：）

提前致谢

4

5 回答 5

15

在对旧（'12）问题的更新中，我认为这可以帮助很多人！

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

选项 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;
 }
});

这将仅在设备方向更改为横向时显示通知。 示例图像通知

于 2014-05-26T15:19:44.497 回答
3

不可能。锁定旋转是一个设备设置： http: //support.apple.com/kb/HT4085 当没有被设备锁定时，浏览器会旋转，因为你的内容在浏览器里面，所以内容也会旋转。也许视口将有助于解决您的问题：< meta name="viewport" content="width = device-width"/>"。我看到您缺少那个元标记。

于 2012-11-23T12:40:41.337 回答
1 
@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/

于 2020-06-09T18:50:15.717 回答
1

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

js方式：window.DeviceOrientationEvent

css方式

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

于 2016-02-20T18:00:23.213 回答
0

目前不可能。但反过来说，

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

min-aspect-ratio: 13/9很重要，如果你不指定这个，对于一些移动设备，如果你专注于一个表单域，键盘打开，这基本上改变了视口的高度，基本上触发了横向媒体查询。因此，最小纵横比对于横向媒体查询非常重要。

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

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

var currentOrientation = function() {  
  if(screen.availHeight < screen.availWidth){
    // Landscape view
  } else {
    // Portrait view
  }
}
// Set orientation on initiliasation
currentOrientation();
// Reset orientation each time window is resized. Keyboard opening, or change in orientation triggers this.
window.addEventListener('resize', currentOrientation);
于 2020-11-25T03:20:57.837 回答