1

我正在Codepen 中创建一个投资组合页面。我决定使用固定背景、滚动站点。到目前为止，这支笔可以与所有主流浏览器完美配合，除了 Safari iOS 移动版（在我的 iPhone 6s 上）。

问题出在 div 中的背景图像中:cover。它在桌面上的 Safari 中运行良好。

<nav id="headNav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">FreeCodeCamp</a>
    <a href="#">Contact</a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/hZaQYF/free_code_camp_square.png" height="40" 
width="40"></a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/kdp8na/github_shadow_square.png" height="40" 
width="40"></a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/jO9V0v/Twitter_shadow_square.png" height="40" 
width="40"></a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/iwtOLv/facebook_shadow_square.png" height="40" 
width="40"></a>
  </nav>

  <div id="homeSection" class="sectionBlock homeSection">

  </div>
  <div id="aboutSection" class="dividerSectionBlock">

  </div>
  <div id="portfolioSection" class="sectionBlock portfolioSection">

  </div>
  <div id="freeCodeCampSection" class="dividerSectionBlock">

  </div>
  <div id="contactSection" class="sectionBlock contactSection">

  </div>

CSS：

 * {
  margin: 0;
}

html, body {
  font-size:10px;
  height: 100%;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 20px;
}

.roundMe {
  border-width: 0px;
  border-radius: 10%;
}

p, li, a {
  font-size: 1rem;
}

nav {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: rgba(0,0,0,.5);
  z-index: 99;
}

nav a {
  text-decoration: none;
  color: white;
  line-height: 50px;
}

.sectionBlock {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.dividerSectionBlock{
  height: 50%;
}

.homeSection{
  background-image: url("https://image.ibb.co/nR7rOF/forestpath.jpg");
}

.portfolioSection {
  background-image: url("https://image.ibb.co/iZsfHa/highway.jpg");
}

.contactSection {
  background-image: url("https://image.ibb.co/c9vviF/Meadow.jpg ");
}

#headNav a:nth-child(-n+5){
  float:left;
  margin-left: 30px;
}
#headNav a:nth-child(n+6){
  float:right;
  margin-right: 5px;
}

/* Media Queries */

/*  Screens 0-399*/
@media screen and (max-width: 399px){
  html {
    font-size:6px
  }
  .shrinkMe {
    height: 12px;
    width: 12px;
  }
  nav {
    height: 15px;
  }
  nav a {
    line-height: 15px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 5px;
  }
    #headNav a:nth-child(n+6) {
    margin-right: 2px;
  }
}

/* Screens 400-599 */
@media screen and (min-width: 400px){
  html {
    font-size:8px
  }
  .shrinkMe {
    height: 20px;
    width: 20px;
  }
  nav {
    height: 28px;
  }
  nav a {
    line-height: 28px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 7px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 4px;
  }
}

/* Screens 600-799 */
@media screen and (min-width: 600px){
  html {
    font-size:12px
  }
  .shrinkMe {
    height: 30px;
    width: 30px;
  }
  nav {
    height: 36px;
  }
  nav a {
    line-height: 36px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 14px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 8px;
  }
}

/* Screens 800-999 */
@media screen and (min-width: 800px){
  html {
    font-size:16px
  }
  .shrinkMe {
    height: 40px;
    width: 40px;
  }
  nav {
    height: 44px;
  }
  nav a {
    line-height: 44px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 21px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 12px;
  }
}

/* Screens 999-1199 */
@media screen and (min-width: 1000px){
  html {
    font-size:20px
  }
  .shrinkMe {
    height: 40px;
    width: 40px;
  }
  nav {
    height: 52px;
  }
  nav a {
    line-height: 52px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 28px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 16px;
  }
}

/* Screens 1200 and up*/
@media screen and (min-width: 1200px){
  html {
    font-size:24px
  }
  .shrinkMe {
    height: 50px;
    width: 50px;
  }
  nav {
    height: 60px;
  }
  nav a {
    line-height: 60px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 35px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 20px;
  }
}
4

1 回答 1

0

这是因为您的固定位置背景。

这是另一个类似的stackoverflow问题，它有一个有效的解决方案：background-size：cover not working on iOS

于 2018-03-02T08:55:17.450 回答