Div不在手机上以横向模式调整

Question

我把背景照片放在100％高度。

当我在横向模式下通过手机（或Chrome / Firefox控制台）打开网站时，图像背景不会占用所有空间。

在桌面模式和纵向移动模式下，它们都可以。只有LANDSCAPE才有问题。

我想在横向模式下，内容设置为视口。怎么做？

MOBILE：MODE PORTRAIT，好的。

MOBILE：MODE LANDSCAPE，内容不适合主div并且不在其中。

请在浏览器控制台中打开Snippet。在横向模式的细胞模拟器中看看我的意思。

＆＃13;

＆＃13;

body, html {
  height:100%;
  padding:0;
  margin:0;

}
.block {
  height: 100%;
  width: 100%;
  text-align: center;
  background: black;

}

.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;      
}

.centered {
  margin-top: 10%;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px; 
  background: white;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

＆＃13;

<div class="block">
     
    <div class="centered">
    
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="img-responsive" id="img_logo">
 <p style="color: black"> <a style="font-size:35px;"> xxxxxx</a> <br><br>text text <br> address <br>  </p>      
   </div>
  </div> 

＆＃13;

＆＃13;

＆＃13;

我尝试删除 .block：before 和：

@media(orientation: landscape){
  .background-image {
    min-height: 200%;
  }
}

但是，这种效果不仅仅适用于模式移动。它适用于MOBILE和DESKTOP。我希望它仅适用于移动设备。

Answer 1

我不确定这是你正在寻找的，但你可以尝试改变＆＃34;身高＆＃34;至＆＃34; min-height＆＃34;在＆＃34; .block＆＃34;

.block {
  min-height: 100%;
  width: 100%;
  text-align: center;
  background: black;
}

这将确保.block div的黑色背景持续到最后。