Vị trí nền CSS không hoạt động trong Mobile Safari (iPhone/iPad)

Tôi gặp vấn đề với vị trí nền trong safari di động. Nó hoạt động tốt trên các trình duyệt máy tính để bàn khác, nhưng không hoạt động trên iPhone hoặc iPad.Vị trí nền CSS không hoạt động trong Mobile Safari (iPhone/iPad)

body { 
background-color: #000000; 
background-image: url('images/background_top.png'); 
background-repeat: no-repeat; 
background-position: center top; 
overflow: auto; 
padding: 0px; 
margin: 0px; 
font-family: "Arial"; 
} 

#header { 
width: 1030px; 
height: 215px; 
margin-left: auto; 
margin-right: auto; 
margin-top: 85px; 
background-image: url('images/header.png'); 
} 

#main-content { 
width: 1000px; 
height: auto; 
margin-left: auto; 
margin-right: auto; 
padding-left: 15px; 
padding-right: 15px; 
padding-top: 15px; 
padding-bottom: 15px; 
background-image: url('images/content_bg.png'); 
background-repeat: repeat-y; 
} 

#footer { 
width: 100%; 
height: 343px; 
background-image: url('images/background_bottom.png'); 
background-position: center; 
background-repeat: no-repeat; 
}

Cả hai "background_top.png" và "background_bottom.png" đều bị dịch chuyển quá xa về bên trái. Tôi đã googled xung quanh, và như xa như tôi có thể nói, vị trí nền IS được hỗ trợ trong safari di động. Tôi cũng đã thử mọi kết hợp từ khóa ("trên cùng", "trung tâm", v.v.), px và%. Có suy nghĩ gì không?

Cảm ơn!

Cập nhật: đây là đánh dấu trong file .html, hiển thị cách bố trí tốt thiết kế & trong các trình duyệt khác: (Tôi cũng cập nhật các css trên)

<html lang="en"> 
<head> 
    <title>Title</title> 
    <link rel="Stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
    <div id="header"></div> 
    <div id="main-content"></div> 
    <div id="footer"></div> 
</body> 
</html>

Cả hai hình ảnh nền rất rộng (~ 2000px) để chiếm dung lượng trên bất kỳ trình duyệt có kích thước nào.

P.S. Tôi biết rằng có thể có một vài phím tắt CSS hiệu quả hơn mà tôi có thể sử dụng, nhưng bây giờ tôi thích có mã được tổ chức giống như tôi có nó để hiển thị.

Nguồn

2010-07-06 Nick

Bạn có thể bao gồm đánh dấu không? Có lẽ vấn đề nằm ở điểm đánh dấu. –

Ok Tôi đã cập nhật một số mã khác – Nick

@Nick Xin chào, bạn đã làm việc đó chưa? Vui lòng chia sẻ mã. –

-1

Điều này có thể do kích thước của (các) sprite của bạn. Xem http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk để biết mô tả đầy đủ và các giải pháp khả thi.

Nguồn

2010-11-24 02:32:47 s1mm0t

từ chối điều này vì URL không còn hợp lệ nữa. – KenB

Dường như khi bạn "cuộn" trên iPhone/iPad, bạn sẽ không cuộn trang giống như cách bạn làm trong trình duyệt trên máy tính để bàn. Những gì bạn đang làm giống như di chuyển toàn bộ trang trong chế độ xem. (Tôi chắc chắn ai đó sẽ sửa tôi nếu tôi đang sử dụng thuật ngữ sai ở đây.)

Điều này có nghĩa là vị trí nền: cố định vẫn được "hỗ trợ" nhưng không có hiệu lực thực sự, vì toàn bộ trang đang di chuyển bên trong khung nhìn thay vì cuộn nội dung trang trong trang.

Nguồn

2010-12-06 16:35:50 Squig

Tôi có vấn đề này và tôi đang giải quyết nó bằng cách loại bỏ chân cố định của tôi sử dụng một phong cách riêng biệt như đã đề cập ở đây: How to target CSS for iPad but exclude Safari 4 desktop using a media query?

Nguồn

2011-01-19 19:19:01

Trình duyệt/Webkit iPhone không thể tập trung hình ảnh nền class khi được đặt trong thẻ cơ thể . Cách duy nhất xung quanh việc này là xóa hình nền khỏi thẻ body của bạn và sử dụng DIV bổ sung làm trình bao bọc.

#wrapper { 
background-color: #000000; 
background-image: url('images/background_top.png'); 
background-repeat: no-repeat; 
background-position: center top; 
overflow: auto; 
} 


<html lang="en"> 
<head> 
    <title>Title</title> 
    <link rel="Stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header"></div> 
    <div id="main-content"></div> 
    <div id="footer"></div> 
    </div> 
</body> 
</html>

Nguồn

2011-02-27 17:28:57 Jimbola

Nó sẽ làm việc với

background-position-x: 50%; 
background-position-y: 0%;

và vẫn thêm

background-position: center top;

cho các trình duyệt khác.

Nguồn

2013-08-22 11:03:30 leymannx

Tạo một ID wrapper để đặt trong cơ thể, sau đó bao gồm CSS sau đây:

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: cover; 
    background-image: url('../images/compressed/background-mobile.png'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
}

Chỉ cần đảm bảo rằng không ai trong số nội dung của bạn đi trong div nếu không thì toàn bộ trang sẽ được cố định với không di chuyển.

Nguồn

2015-01-13 09:44:56 lg365

Vị trí nền CSS không hoạt động trong Mobile Safari (iPhone/iPad)

Trả lời

Các vấn đề liên quan