"background-size: cover" không bao gồm màn hình điện thoại di động

Question

Tôi có ảnh nền trên trang web của mình bằng cách sử dụng background-size:cover. Nó hoạt động cho hầu hết các phần nhưng để lại một khoảng trắng 30px lạ trên Galaxy S3 của tôi ở chế độ dọc.

Tôi đã đính kèm ảnh chụp màn hình. Đường kẻ sọc 1px là để minh họa toàn bộ màn hình. Có vẻ như nền dừng ngay sau phương tiện truyền thông xã hội ul s.

Tôi đã thử nghiệm điều này bằng cách xóa ul và nền tự gắn nó vào cuối văn bản dòng giới thiệu.

Ngoài ra, đây là CSS của tôi liên quan xem portait di động:

@media only screen and (max-width: 480px) { 

.logo { 
    position: relative; 
    background-size:70%; 
    -webkit-background-size: 70%; 
    -moz-background-size: 70%; 
    -o-background-size: 70%; 
    margin-top: 30px; 
} 

h1 { 
    margin-top: -25px; 
    font-size: 21px; 
    line-height: 21px; 
    margin-bottom: 15px; 
} 

h2 { 
    font-size: 35px; 
    line-height: 35px; 
} 

.footer_mobile { 
    display: block; 
    margin-top: 20px; 
    margin-bottom: 0px; 
} 

li { 
    display: block; 
    font-size: 1.3em; 
} 

này sử dụng để không xảy ra, nhưng tôi đoán tôi vô tình nghe trộm nó trong khi cố gắng để giải quyết một vấn đề khác.

Answer 1

Sau nhiều giờ thử những thứ khác nhau, hãy thêm min-height: 100%; vào cuối html bên dưới { background:... } đã hoạt động đối với tôi.

Answer 2

Galaxy S3 có chiều rộng lớn hơn 480px ở chế độ xem ngang hoặc dọc để tôi không nghĩ rằng các quy tắc CSS đó sẽ được áp dụng. Bạn sẽ cần phải sử dụng 720px.

Hãy thử add:

* { background:transparent } 

đúng lúc kết thúc & di chuyển html { background:... } CSS của bạn sau đó.

Bằng cách này, bạn có thể xem liệu có phần tử chân trang di động hay bất kỳ phần tử nào khác mà bạn đã tạo đang cản trở chế độ xem hay không.

Ngoài ra, tôi sẽ thử áp dụng CSS nền cho nội dung chứ không phải HTML. Hy vọng bạn sẽ đến gần hơn với câu trả lời.

Answer 3

Tính năng này hoạt động trên Android 4.1.2 và iOS 6.1.3 (iPhone 4) và chuyển sang màn hình nền. Được viết cho các trang web đáp ứng.

Chỉ trong trường hợp, trong đầu HTML của bạn, một cái gì đó như thế này:

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

HTML:

<div class="html-mobile-background"></div> 

CSS:

html { 
    /* Whatever you want */ 
} 
.html-mobile-background { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 125%; /* To compensate for mobile browser address bar space */ 
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%; 
} 

@media (min-width: 600px) { 
    html { 
     background: url(/images/bg.jpg) no-repeat center center fixed; 
     background-size: cover; 
    } 
    .html-mobile-background { 
     display: none; 
    } 
} 

Answer 4

giải pháp hiện tại sẽ được sử dụng chiều cao khung nhìn (vh) để cho biết chiều cao mong muốn. 100% không hoạt động đối với Chrome dành cho thiết bị di động. CSS:

background-size: cover; 
min-height: 100%;