Không ai khá trả lời câu hỏi tương tự này,CSS position: fixed nguyên nhân ảnh mờ trong Android Trình duyệt
Blurry images on stock android browser
Vì vậy, tôi sẽ gửi phiên bản riêng của tôi cụ thể đối với hoàn cảnh của tôi.
Vấn đề là position:fixed khiến các yếu tố hình ảnh con bị mờ trong một số trình duyệt Android. Trong trường hợp của tôi, nó gây ra trình duyệt chứng khoán của Galaxy Note v1 chạy Android 4.0 để trải nghiệm vấn đề này. Những người khác đã nói điều tương tự cho một số Galaxy S3. Dưới đây là mã của tôi:
Preview @http://jl.evermight.net/blurryposition/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
</body>
</html>
Bạn sẽ nhận thấy rằng logo Testing OPTIX là mờ lúc đầu. Nếu bạn xóa position:fixed khỏi #top-nav-container, thì biểu trưng rõ ràng và rõ ràng. Vì vậy, câu hỏi của tôi là, làm thế nào để giữ cho cả hai position:fixed và một logo sắc nét?
Trong trang web thực sự của tôi, điều hướng hàng đầu được cho là vẫn cố định trong khi bạn cuộn qua trang web. Tôi đã thử sử dụng position:absolute và sử dụng javascript để định vị lại điều hướng trên cùng khi cuộn, nhưng điều đó đã gây ra toàn bộ các hiệu ứng nhảy/nhấp nháy. Vì vậy, nếu tôi không thể sử dụng position:fixed hoặc position:absolute để sửa điều hướng trên cùng ở đầu trình duyệt web trên điện thoại di động, các tùy chọn khác của tôi là gì? Các trang web di động khác đạt được kết quả này như thế nào?
bổ sung Thông tin:
tôi đã làm một số thí nghiệm nhiều hơn với hình ảnh thay đổi kích thước, thay đổi quan điểm cảng, và thay đổi vị trí: cố định/tuyệt đối và đến một số kết quả thú vị.Xem dưới đây:
- position: fixed không background-size với-viewport - mờ
- position: fixed không background-kích thước mà không-viewport - sắc nét
- position: fixed background- kích thước: 20% với-viewport - mờ
vị trí: cố định nền-size: 20% mà không-viewport - mờ
position: absolute không background-size với-viewport - mờ
- position: absolute không background-kích thước mà không-viewport - sắc nét
- position: absolute nền-size: 20% với-viewport - sắc nét
- position: absolute nền-size: 20% mà không-viewport - sắc nét
Dưới đây là làm thế nào để đọc biểu đồ này:
bang cột đầu tiên dù
#top-nav-containerđang sử dụng position: fixed hoặc position: absolutebang cột thứ hai nếu tôi sử dụng
background-size:20%hoặc nếu tôi bỏ qua nótrạng thái cột thứ ba cho dù tôi có bao gồm thẻ
<meta viewport>trong đầucột thứ tư cho biết liệu biểu tượng kiểm tra optix mờ hoặc sắc nét.
Nhìn vào kết quả, bạn có thể thấy rằng lần duy nhất bạn có được hình ảnh sắc nét với vùng chứa có vị trí: cố định là khi hình ảnh không bị kéo căng hoặc nén qua kích thước nền hoặc hoặc với xem cổng. Ngoài ra, lần duy nhất bạn nhận được một hình ảnh mờ với một vùng chứa có vị trí: tuyệt đối là khi một hình ảnh được kéo dài với kích thước nền và với một khung nhìn.
mà không ảnh hưởng – John