Question

我对媒体查询还不熟悉，所以我不确定我是否在这里100％正确使用它们。但由于某些原因，家庭背景图像和联系背景图像在我的iPhone上的移动视图中无法正常显示。我搜索了许多工作但仍未找到任何可行的方法。我的网站链接是 - http://fharrishomecare.com任何帮助将不胜感激！此外，当我隐藏iframe地图时，它仍然在平板电脑视图中留下一块空白区域。任何帮助也将不胜感激！

＆＃13;

#home {
  background: url('../images/colorful-bg.jpg') 50% 0 repeat-y fixed;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  text-align: center;
}

#contact {
  background: url('../images/contact-bg.jpg') 50% 0 repeat-y fixed;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

/* mobile responsive section styles
/* ========================================== */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  h1 {
    font-size: 53px;
  }
  #counter .counter-item {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }
 iframe {
    display: none;
 }
 
}

@media (max-width: 650px) {
  h1 {
    font-size: 40px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }
   iframe {
    display: none;
 }
}

@media (max-width: 450px) {
  h1 {
    font-size: 28px;
    line-height: 38px;
  }
  #home h5 {
    font-size: 11px;
  }
  #home .btn {
    display: inline-block;
    padding: 14px 32px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }  
   iframe {
    display: none;
 }
}

@media (max-width: 375px) {
  h1 {
    font-size: 24px;
    line-height: 34px;
  }
  #home h5 {
    font-size: 9px;
  }
  #home,
  #divider,
  #contact {
      -moz-background-size: auto;
      -webkit-background-size: auto;
      background-attachment: scroll;
      background-position: top;
      background-size: auto;  
  }
   iframe {
    display: none;
 }
}

＆＃13;

Answer 1

看起来您的背景图片没有＆＃34;放大＆＃34;但是，实际上，＆＃34;没有缩小＆＃34;。背景在比$(".toggle").click(function() { $("#drop").toggleClass('flip'); $("#menu").slideToggle(300); });窄的屏幕上以实际尺寸显示。

这是由1024px行style.css，~480，~500和~525中的大量声明造成的，其中一堆媒体反复查询将~545，background-size和#home元素的#divider属性设置为#contact。

如果您希望背景图片尽可能小但仍覆盖该元素，则应将这些元素的auto属性设置为background-size。

另一方面，将cover设置为background-size会与您选择的视差方法发生冲突。每当您在cover元素上垂直移动background-position通过视差时，白色空间的＆＃34;块＃34;你描述出现了。这可以使用两种不同的方法来解决：

使用负边距+填充，因此背景为background-size:cover足以容纳＆＃34;白色块＆＃34;当元素在屏幕上时不显示
使用不同的视差方法（绝对定位的zoomed-in标签或可以应用CSS变换的伪元素。）

请注意<img>目前有相当数量的次优代码。而且您的标记也有一些显着的不一致性，例如，您的某些部分以style.css类为特色，而其他部分则parallax-section无法在您的paralla-section中找到。

视差背景图片放大移动视图

1 个答案: