封面背景圖像在某些移動設備上不正確

我有一個網站，在頁面頂部使用大小爲「封面」的背景。圖像應該根據屏幕分辨率進行更改，但某些設備會顯示來自桌面或平板電腦版本的圖像。該網站是rookmgmt.ca，我將包含相關的HTML和CSS代碼。封面背景圖像在某些移動設備上不正確

編輯：更具體地說，某些設備上的圖像太大了。它只展現了天空的頂部，而不是城市天際線。它適用於我的手機和我已經親自測試過的其他手機，但不適用於所有設備。

HTML

<div class="fixed-background bg-1"> 
      <div class="container"> 
       <div class="title"> 
        <h1>ROOK PROPERTY<br> 
         MANAGEMENT INC.</h1> 
        <h2>CONDOMINIUM MANAGEMENT</h2> 
       </div> 
      </div> 
     </div>

CSS

.fixed-background { 
    height: 800px; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
    text-align: center; 
    overflow: auto; 
} 

.fixed-background.bg-1 { 
    background-image: url("../images/IMG_6642-2_mobile.jpg"); 
}

Meta標籤

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 767px)" href="css/styles_mobile.css"> 
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 1199px)" href="css/styles_tablet.css"> 
<link rel="stylesheet" type="text/css" media="screen and (min-width:1200px)" href="css/styles_desk.css">

來源

2016-12-31 Jordan U.

我不知道如果我理解正確的問題，但在取出最小寬度從meta標籤爲我工作。 – winterfox

我會試試看。我遇到的問題是圖像比屏幕上的圖像大得多，只顯示圖像的頂部。它似乎並不在每個設備上（它在我的手機上都有效），但在某些蘋果設備上似乎就是這種情況。 –

使用百分比，而不是不同的像素描述

.fixed-background { 
 
    height: 50%; 
 
    width: 30%; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    text-align: center; 
 
    overflow: auto; 
 
} 
 

 
.fixed-background.bg-1 { 
 
    background-image: url("../images/IMG_6642-2_mobile.jpg"); 
 
}

來源

2016-12-31 04:42:38

除了讓div更小之外，它沒有任何其他功能 –

封面背景圖像在某些移動設備上不正確

回答

相關問題