Javascript 检测webapp是否为横向，并在顶部添加填充

我想要的脚本是：

-检测站点是否在独立应用程序中 -检测站点是否处于景观中 -将填充顶部添加到页眉

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

用于设备条件布局：

@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 */
}

当然，您可以将媒体查询与此相结合。

我找到了答案

if (window.navigator.standalone){
 $(window).resize( function(){
    var height = $(window).height();
    var width = $(window).width();

    if(width>height) {
      // Landscape
      $('header').css('padding-top','20px');
      }
    else{
      $('header').css('padding-top','0px');
    }
   });

---

}

尝试使用媒体查询，例如

@媒体屏幕和（方向：横向）{header{padding top:20px；}

。我已经在网页上使用了它，但我需要一个web应用程序的代码。网页在布局方面做的任何事情在web应用程序中都不会起作用。我不需要媒体查询，我需要一个JS/jQuery来更改站点。@BVSK媒体查询通过在CSS中声明性地嵌入代码，使一半代码过时，这是首选方法。