jquery - 如果在某种模式下横向或纵向，我如何提示用户旋转设备，类似于 GameInformer App

Question

我有一个最好在横向模式下查看的网站。我怎样才能拥有它，所以如果用户以横向模式加载网站，那很好，但是如果它以纵向模式加载，或者他们从横向模式旋转到纵向模式，则图像或弹出窗口会占据整个屏幕，要求他们旋转回景观？Thinking 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%;
    }
}

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

您可以在 jsfiddle 上进行测试，方法是移动中间的竖线以使预览窗口变大和变小：http: //jsfiddle.net/wv6Vp/

Answer 3

测量屏幕宽度可能是您需要的，因为大多数手机屏幕宽度约为 360。您可以通过 js 使用 screen.width 示例： if(screen.width>360){ // do something }