与GameInformer App类似，如何在横向或纵向模式下提示用户旋转设备 [英] How can I prompt user to rotate device if in a certain mode landscape or portrait, similar to GameInformer App

问题描述

我有一个最好在横向模式下浏览的网站.如果用户以横向模式加载网站，那该怎么办呢?但是如果它以纵向模式加载，或者他们从横向模式旋转到纵向模式，则图像或弹出窗口会占据整个屏幕，要求他们旋转回到景观?认为Javascript/jQuery可以做到这一点.

I have a website that is best viewed in Landscape mode. How can I have it so if the user loads the website in landscape mode it is fine but if it loads in Portrait mode or they rotate from Landscape to Portrait mode a image or something popups up taking up the entire screen asking them to rotate back to landscape? Thinking Javascript/jQuery can do this.

我已经在iPad上使用Game Informer应用程序完成了此操作，如果用户以纵向打开应用程序或从横向"旋转到纵向"，则会弹出不透明的图像，要求他们旋转回横向. [查看iPad屏幕截图]

I have seen this done on my iPad with the Game Informer app where if the user opens the app in Portrait or rotates from Landscape to Portrait a opaque image pops up asking them to rotate back to landscape. [see iPad screenshot]

推荐答案

您可以将CSS与带样式的div容器一起使用，而不是jQuery/JS，该CSS容器仅在设备处于纵向模式时显示.

Instead of jQuery/JS you can use CSS with a styled div container instead, which is only shown when the device is in portrait mode.

您可以通过媒体查询来把握方向

You can catch the orientation with a media query

示例:

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

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

这篇关于与GameInformer App类似，如何在横向或纵向模式下提示用户旋转设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！