如何使我的背景圖像覆蓋視網膜設備上的整個屏幕？

Question

在大型移動設備（例如iPhone，iPad等）上，我的巨型背景圖片僅占瀏覽器高度的一半。 我希望背景圖像能夠覆蓋高分辨率移動設備上的大部分（如果不是全部）屏幕。

http://nelsonforfresno.org/-我正在嘗試將圖像實現到的站點

我用於背景圖片的CSS代碼…

.donate-hero {
    background: #485563 url(../img/donate-bg.jpg) no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
}

Answer 1

像這樣設置圖像的寬度和高度

.donate-hero {
    background: #485563 url(../img/donate-bg.jpg) no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width:100wh;
    height:100vh;
}

注意：如果圖像是頁面上的唯一元素，則它將占據瀏覽器的所有空間。

編輯：查看此鏈接以獲取有關vh和wh測量的更多詳細信息

http://thenewcode.com/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design

Answer 2

這個meta標簽對我有用。 它幫助我指示瀏覽器按比例縮小我的整個網頁以適合屏幕，而與該設備（例如iPhone，iPad，平板電腦等）相關的設備像素比率無關。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http://www.w3schools.com/css/css_rwd_viewport.asp