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

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

我已经在iPad上使用Game Informer应用程序看到了这一点，如果用户在Portrait中打开应用程序或从Landscape转换为Portrait，则会弹出一个不透明的图像，要求它们旋转回横向。 [见iPad截图]

Answer 1

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

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

例：

/* 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：

 
 
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.
  

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/