如何实现“请旋转您的设备”屏幕？ [复制]

Posted 2023-03-31

【中文标题】如何实现“请旋转您的设备”屏幕？ [复制]

【英文标题】：How to realise a "Please Rotate your device" screen? [duplicate]

【发布时间】：2014-10-30 10:51:50

【问题描述】：

如果您在手机上以纵向模式打开本网站：

http://432parkavenue.com/

您会看到一个似乎是覆盖的内容，通知您必须旋转设备才能正确查看网站。

这基本上是如何通过 CSS / html 或插件实现的？

【参考方案1】：

我不确定该网站是如何做到的，因为我在移动设备上，所以没有开发工具。 ;)

但是使用 javascript 来检查高度是否大于宽度是很容易的，这是纵向模式的一个特征。

if (window.innerHeight > window.innerWidth) // display the overlay 

【讨论】：

如果宽度小于屏幕高度，也会显示在平板电脑或桌面上

没错，但也许你也需要更宽的屏幕。

感谢您的快速回复！我不需要对这个网站是如何做到的进行精确的分析。事实上，我确实很难理解确认屏幕本身旋转的整体过程:)

【参考方案2】：

演示 - http://jsfiddle.net/victor_007/4862j3ne/1/

您可以使用@media queries 来检测宽度并显示 div

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) 
      divdisplay:block

【参考方案3】：

当切换到横向模式时，我用它来调整移动版小型网站上的图像：

$(window).on('resize orientationchange', function () )

由于浏览器的不同而导致的2个不同事件（我确定还有几个）

【参考方案4】：

请使用下面的 sn-p 代码。我希望这会奏效..

if(window.innerHeight > window.innerWidth)
    if(window.innerHeight < "600")
        alert("Please use landscape!");
    

谢谢

【讨论】：

在您的比较中存在从字符串到数字的隐式转换，这不是一个好的做法，并且可能导致错误。此外，如果您使用的是高 DPI 屏幕（在移动设备上正常），纵向模式下的窗口高度可能会大于 600 像素。