jquery - 如果在某种横向或纵向模式下，如何提示用户旋转设备，类似于 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;
    }
}