移動屏幕時標題圖像正在關閉

Question

我正在為自己的公司制作網頁。 我選擇Bootstrap是因為它具有移動功能。 我有一個問題：

• 當使用電話（iPhone 5）訪問網頁時，標題圖像會關閉，沒有比例放大。

這是代碼：

#heading {
  display: block;
  width: 100%;
  height: 543px;     
  background: url('../images/header.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-shadow: inset 0 -4px 9px -3px #000;
  -moz-box-shadow: inset 0 -4px 9px -3px #000;
  box-shadow: inset 0 -4px 9px -3px #000;
}

@media(max-width:563px) {
  #heading {
    display: block;
    width: 100%;
    height: 300px;         
    background: url('../images/headerm.jpg') no-repeat center center fixed; 
  }
  #navigation .navlinks li {
    margin-right: 1px;
  }
  #navigation .navlinks li a {
    padding: 0 5px;
    font-size: 12px;
  }

}

我嘗試對媒體查詢使用其他大小的圖像，但是沒有用。

這是測試方案的鏈接。 如果縮小瀏覽器以模擬手機屏幕，則圖像不會關閉。 它必須在電話上。

Answer 1

@media(max-width:563px) {
  #heading {
    display: block;
    width: 100%;
    height: 300px;         
    background: url('../images/headerm.jpg') no-repeat center center scroll; 
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
  }
}

應該管用。 更改為固定滾動。