Hình ảnh mờ trên trình duyệt Android chứng khoán

Question

Tôi đã cố gắng tìm hiểu điều này trong nhiều tuần và không tìm thấy giải pháp thực sự nào. Tôi phát hiện ra một cách giải quyết nhưng tôi thấy nó rất khó chịu.

Hình ảnh tải mờ trên trình duyệt mặc định của Galaxy S3 nhưng trong chrome & firefox chúng tải hoàn hảo mà không cần giải pháp. Các hình ảnh đã được 2x đã cho màn hình DPI cao, do đó, đó không phải là vấn đề.

Công việc xung quanh là đặt bất kỳ văn bản nào trong liên kết. Tôi đặt "."

<a href="#">.</a> 

và làm kích thước phông chữ rất nhỏ.

#closeButton a{ 
float:left; 
display:block; 
position:fixed; 
top:9px; 
left:10px; 
width:46px; 
height:44px; 
background:url(../img/camera/closeX@2x.png) 0 0 no-repeat; 
background-size:46px 90px; 
text-align:center; 
font-size:1px; 
color:#FFF; 
} 
#closeButton a:active{ 
background-position:0 -45px;  
} 

<span id="closeButton"><a ontouchstart="" href="vibes.html"></a></span> 

Ảnh chụp màn hình mà không cần workaround: http://igor2.com/blurry/no-text.png

Ảnh chụp màn hình với cách giải quyết: http://igor2.com/blurry/with-text.png

Bất kỳ trợ giúp sẽ được đánh giá cao! Tôi đã kéo tóc ra cố gắng tìm ra điều này. Có phải là một giải pháp kể từ khi di động facebook và các trang di động khác tải hình ảnh/biểu tượng sắc nét đẹp mắt. Cảm ơn bạn!

Answer 1

Tôi nhận thấy từ ảnh chụp màn hình của bạn rằng bạn hiện đang thử nghiệm điều này qua 4G của bạn (ví dụ: kết nối di động).

Bạn đã thử lặp lại các thử nghiệm qua wifi thay thế chưa? Bạn cần đảm bảo bạn không kéo bộ nhớ cache khi so sánh vì vậy cũng đáng để trình duyệt của bạn vào chế độ duyệt web/chế độ ẩn danh - điều này sẽ buộc nó lấy nội dung mới từ máy chủ thay vì sử dụng nội dung được lưu trong bộ nhớ cache. bộ nhớ cache của trình duyệt mỗi lần).

Lý do tôi đề cập đến kết nối internet trên thiết bị là tôi đã gặp phải vấn đề tương tự năm ngoái và sau nhiều lần săn, đã nhận ra rằng proxy của mạng nén hình ảnh trước khi phân phối để tiết kiệm băng thông.

Tôi có thể là cách đánh dấu nhưng nó chắc chắn là một cái gì đó bạn nên kiểm tra để bạn ít nhất có thể vượt qua khả năng đó khỏi danh sách của bạn.

Nếu nó bật ra được như vậy, tere là một cuộc thảo luận thực sự thú vị trên toàn bộ điều: http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

Tin xấu là các mạng di động không phải lúc nào chú ý đến tiêu đề http no-cache.

Ba tùy chọn đơn giản nhất có sẵn là:

• phục vụ hình ảnh của bạn qua https - mạng sẽ không cache được mã hóa giao thông;
• phục vụ hình ảnh của bạn qua cổng http khác nhau;
• sử dụng url dữ liệu để nhúng hình ảnh trực tuyến (mặc dù có các tác động hỗ trợ trình duyệt tại thời điểm đó).

Cuối cùng, có một cách giải quyết một phần trong tệp htaccess của HTML5 boilerplate giúp giảm thiểu những ảnh hưởng này.Trong file .htaccess:

# ---------------------------------------------------------------------- 
# Prevent mobile network providers from modifying your site 
# ---------------------------------------------------------------------- 

# The following header prevents modification of your code over 3G on some 
# European providers. 
# This is the official 'bypass' suggested by O2 in the UK. 

<IfModule mod_headers.c> 
Header set Cache-Control "no-transform" 
</IfModule> 

này làm việc với các cặp vợ chồng trong những mạng lưới Anh tôi đã thử nghiệm, nhưng kết quả của bạn có thể thay đổi ..

Answer 2

tôi đã cùng một vấn đề và phát hiện ra rằng nguyên nhân của vấn đề là position:fixed và z-index trên trình duyệt web mặc định của Android (không phải Chrome!).

Sau khi xóa các thuộc tính css này, tất cả hình ảnh của tôi trở nên rất rõ ràng và rõ ràng.

Từ kinh nghiệm của tôi, position:fixed là không-đi cho thiết bị di động, đặc biệt là trên Android và các phiên bản iOS cũ hơn. Các os di động duy nhất tôi biết rằng có thể xử lý position:fixed cũng là iOS6 và các phiên bản sau này.

---

Cập nhật: Cho đến nay việc sửa chữa duy nhất mà tôi biết là chỉ cần tránh kết hợp position:fixed và z-index. Đôi khi chỉ cần loại bỏ z-index thực hiện các trick hoặc không sử dụng position:fixed ở tất cả trên iOS và Android. Nó không phải là một thực hành tốt trên điện thoại di động anyway. Bên cạnh đó bạn chỉ có thể cầu nguyện rằng Chrome sẽ thay thế Android Stock Browser làm trình duyệt mặc định trong tương lai càng nhanh càng tốt trên hầu hết các thiết bị Android.