如果处于特定模式横向或纵向，我如何提示用户旋转设备，类似于GameInformer App

Question

我的网站最好以横向模式观看。我如何才能拥有它如果用户以横向模式加载网站就可以了，但是如果它以纵向模式加载或者它们从横向模式旋转到纵向模式，则会弹出一个图像或某个东西占据整个屏幕，要求它们旋转回景观？思考Javascript / jQuery可以做到这一点。

我已经在iPad上使用Game Informer应用程序完成了这项工作，如果用户在纵向中打开应用程序或从横向旋转到纵向，则会弹出一个不透明的图像，要求他们旋转回横向。 [见iPad截图]

Answer 1

而不是jQuery / JS，您可以使用带有样式div容器的CSS，而只在设备处于纵向模式时显示。

您可以使用媒体查询来捕捉方向

示例：

/* for all screens */
#info {display: none;}

/* only when orientation is in portrait mode */
@media all and (orientation:portrait) {
    #info {
         display: block;
    }
}

Answer 2

我看到你用responsive-design标记了这个问题，所以我想我可以提供一个不需要Javascript的解决方案，而且可以用CSS完成。

在横向和纵向模式之间切换时，您知道有两种不同的屏幕尺寸，您可以使用媒体查询来显示和隐藏叠加层：

HTML：

<div id="content">
    <p>Integer velit nulla, condimentum vitae risus ut, rhoncus vulputate quam. Fusce lacus elit, accumsan eu dolor vel, scelerisque pretium turpis. Vivamus ac lectus vitae enim lacinia fringilla vel id tellus. Curabitur pharetra tortor eget risus ornare scelerisque. Morbi tempus et felis vitae venenatis. Suspendisse vitae ultrices est, nec sagittis arcu.</p>
</div>

CSS：

#rotate {
    display: none;
}

@media screen and (max-width: 300px) {
    #rotate {
        background-color: rgba(0,0,0,0.5);
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

所有这一切都是检查可用宽度，如果它是300px或更低，它将显示叠加的内容。如果可用宽度大于300px，则会隐藏内容。您可以针对移动设备的不同宽度调整此值，以检查它是处于纵向还是横向模式。

您可以通过移动中间的垂直条来在jsfiddle上测试这一点，以使预览窗口变得更大和更小：http://jsfiddle.net/wv6Vp/