如何限制网站的横向模式[重复]答案

【问题标题】：how to restrict landscape mode for websites [duplicate]如何限制网站的横向模式[重复]
【发布时间】：2017-01-07 22:30:29
【问题描述】：

我有我的网站并想阻止横向模式。我想让用户限制在 potrait 模式下，因为我有自定义标题，在固定位置使用大约 100 像素的屏幕空间。

另外，我希望将其应用于屏幕宽度低于 777 像素的设备。

伙计们，请让我知道是否可以，如果可以，那么如何。当我使用用于将其标记为重复的代码时，我得到了这个问题，如屏幕截图所示。

【问题讨论】：

标签： javascript jquery css html responsive-design

【解决方案1】：

使用 css 媒体查询显示标志来转动设备：

#turn {
  display: none;
  z-index: 100;
  position: fixed;
}

@media (orientation: landscape) {
  #turn {
    display:block;
  }
}

<div id="turn">
  Please turn your device
</div>

【讨论】：

我想限制用户使用横向，并且仅限于肖像模式。如果我想在那时显示该信息，我可以早点完成。
@Abhishek Dhanraj Shahdeo：我现在没有更好的方法，我想向您展示一种可能的解决方法
谢谢哥们，但我正在寻找的是不同的东西。如果您遇到任何解决方案，请务必告诉我。
显示一条消息说他们需要使用纵向模式是实现您所追求的最佳方式。
@AbhishekDhanrajShahdeo - 你没有很好地定义你的问题。为什么要限制用户选择他们的界面？您将无法阻止他们将手机转为横向模式。那是 iPhone/Safari -(NSUInteger)supportedInterfaceOrientations 内部的硬件/软件配置。作为开发人员，您的工作是为所有可能的情况提供可访问性。如果您不想提供这种可访问性，那么用户将学会按照您的意图使用该网站，否则他们根本不会使用它。

【解决方案2】：

如果您愿意，可以使用 javascript 解决此问题。出于测试目的，您可以在页面中添加以下代码：

window.onresize = function (event) {
    console.log('resizing!');
    console.log(`new size: w${window.innerWidth} h${window.innerHeight}`);
    if(window.innerWidth < 777) {
        // do something
    }
    if(window.innerWidth > window.innerHeight) {
        // do something
    }
}

window.innerWidth和window.innerHeight返回的值是一个数字，所以你可以用它来计算。

【讨论】：

这不是关于调整大小，而是关于用户在具有横向模式的设备中打开网站。这需要加以限制。

【解决方案3】：

我想你可以试试这样的：

@media (orientation: landscape) and (max-width: 777px) {
  html {
    transform: rotateZ(90deg);
  }
}

但显示要旋转的消息会更加用户友好。有些人觉得很难使用纵向模式。

【讨论】：