在手机/平板电脑上从横向更改为纵向时出现空白问题答案

【问题标题】：Issue with white space when changing from landscape to portrait on mobile/tablet在手机/平板电脑上从横向更改为纵向时出现空白问题
【发布时间】：2016-09-05 11:01:35
【问题描述】：

我正在为个人项目开发的网站需要一个大背景图像（全屏），在这个屏幕外是我的容器 div <main>，用户向下滚动屏幕，这个容器 div 覆盖大背景图像，直到用户到达页面底部<footer>。

这在任何屏幕尺寸上都能完美运行但仅在横向视图中，现在我知道这是因为<main> div 被设置为在屏幕外通过有一个 body高度 css 为 100%，但是这会导致在纵向视图中查看时出现问题，因为这会将 <main> div 向下推到屏幕底部，在背景图像下方留下一个我不想要的巨大空白。

我是否必须运行媒体查询来解决这个问题？..（我宁愿不用，因为媒体查询很棒，但它们并没有真正考虑到用户通过拖动边缘来调整屏幕大小），或者我错过了什么我的 CSS 还是最终可以通过 javascript 修复？

更多信息：Bootstrap v3.3.7， https://blackrockdigital.github.io/startbootstrap-scrolling-nav/

css:

body {
    width: 100%;
    height: 100%;
}
html {
    width: 100%;
    height: 100%;
}
/* div holding the background image */
.mainbg {
    background-image: url("../images/main_image.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% auto;
    height: 100%;
}

html:

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
   <div class="mainbg"></div>

    <main role="main">
       <!-- Intro Section -->
    <section id="intro" class="intro-section mobile-block">
        <div class="container-fluid">
            <div class="col-lg-12">
              <h1>Stack Overflow Question</h1>
            </div>
              <div class="row">

【问题讨论】：

不确定您所说的“媒体查询很棒，但它们并没有真正考虑到用户通过拖动边缘来调整屏幕大小”。首先，基于窗口宽度的媒体查询 do 响应用户调整窗口大小。其次，还有针对硬件屏幕尺寸的媒体查询，这可能就是你所追求的。

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

我认为您发布的代码不足以让我给您一个工作示例，但总体思路是您可以使用媒体查询来根据视口宽度修改 css。

也许它可以像

这样简单

@media (max-width: 767px) {   /* adjust breakpoint as req'd */
   .mainbg {
     height:75%;   /* adjust as req'd, could be % or sometimes pixel value is easier to work with on narrow viewports  */
   }
}

或者您可能需要使用多个媒体请求来定位不同的视口

@media (max-width: 767px) {
       .mainbg {
         ....
       }
    }    

 @media (max-width: 480px) {
       .mainbg {
         ...
       }
    }

或者偶尔稍微复杂一点的媒体查询，比如

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .mainbg {
     ...
   }
        }

请记住，通常的 CSS 级联规则适用，因此请注意确保顺序或媒体查询正确，并将这些规则放在样式表中的正确位置。

我必须运行媒体查询来解决这个问题吗？..（我宁愿不用媒体查询很棒，但它们并没有真正考虑到用户调整大小通过拖动边缘来显示屏幕），或者我在我的 css 还是最终可以通过 javascript 修复？

你可以用 javascript 来做，一般来说用 CSS 解决它会更容易。如果您使用媒体查询，则用户调整屏幕大小没有问题，它会起作用。

希望这会有所帮助！

【讨论】：