javascript - 检测 webapp 是否横向并添加 padding-top

Question

我想要的脚本:

-检测站点是否在独立应用程序中 - 检测网站是否横向 - 将 padding-top 添加到标题

if (window.navigator.standalone == true && window.innerWidth > window.innerHeight){
   $('header').css('padding-top','20px');
}

Answer 1

使用media queries对于设备条件布局:

@media screen and (orientation:landscape) {
    header {
        padding-top:20px;
    }
}

如果 standalone 属性真的很重要，在 Javascript 中检测它并在主体中添加一个类:

if (window.navigator.standalone == true)
    $('body').addClass('standalone');

然后在您的 CSS 中使用它来应用额外的要求:

.standalone header {
    padding-top:20px; /* only applied if standalone */
}

您当然可以将媒体查询与此结合起来。