更改纵向屏幕的 CSS（例如 iPad）[重复]

Posted 2023-03-10

【中文标题】更改纵向屏幕的 CSS（例如 iPad）[重复]

【英文标题】：Changing CSS for portrait screens (for example, iPad) [duplicate]

【发布时间】：2013-10-10 07:06:49

【问题描述】：

我已经建立了一个网站，我很高兴它的响应能力。但是，在 ipad 的纵向模式下，下半部分有大量空白，我想知道是否有一种方法可以检测纵向屏幕并相应地更改 CSS。

如果有人能指出我正确的方向，将不胜感激！

谢谢

【参考方案1】：

/* Portrait */
@media screen and (orientation:portrait) 
/* Portrait styles */

/* Landscape */
@media screen and (orientation:landscape) 
/* Landscape styles */

【讨论】：

感谢您的快速回复！我会测试一下，让你知道我是怎么做的。再次感谢！！

这非常简单！非常感谢您的帮助:)

【参考方案2】：

你可以只检测屏幕宽度和高度。如果高度大于宽度，则为纵向。

if (window.innerHeight > window.innerWidth) 
    //Portrait code here