检测webapp是否处于横向方向并添加padding-top

Question

我想要的剧本：

-detect if site是否在独立应用中 -detect如果站点在横向 -add padding-top to header

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;
    }
}

如果独立属性非常重要，请在Javascript中检测它并向正文添加一个类：

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

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

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

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

Answer 2

我想通了

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');
    }
   });

}