2012-04-11 13 views
5

Tôi đang tối ưu hóa trang web của mình cho các màn hình có độ phân giải cao hơn (đặc biệt là iPad mới). Tôi có các trang web định dạng theo cách tôi muốn, và tôi chỉ tăng độ phân giải của mỗi hình ảnh nhưng vẫn còn hạn chế nó để các DIV mà tôi hiện đang có. Ví dụ, tôi có một hình ảnh với độ phân giải 483x246 và tôi có nó phù hợp với một DIV với kích thước thiết lập 188x96.Hình ảnh độ phân giải cao Trình duyệt IE hiển thị

Hình ảnh trông tuyệt vời trên Chrome, Firefox và quan trọng nhất trên iPad mới. Thậm chí phóng to nó đẹp và sắc nét (như trái ngược với hình ảnh 188x96 cũ của tôi trông mờ và pixelated khi phóng to)

Sự cố xảy ra khi tôi mở trang trong IE. Nó hiển thị hình ảnh ở kích thước chính xác nhưng nó bị lởm chởm. Xem liên kết để so sánh bên dưới. Tôi biết đó là một vấn đề với cách IE thay đổi kích thước và hiển thị hình ảnh khi đang di chuyển.

Câu hỏi của tôi sẽ là, có cách nào để làm cho IE hiển thị hình ảnh độc đáo không? Nếu không, có cách nào tôi có thể đặt trong mã để nếu nó phát hiện IE, nó sẽ hiển thị hình ảnh cũ của tôi thấp res? Tôi đã nhìn khắp mọi nơi nhưng không tìm thấy bất cứ điều gì liên quan đến vấn đề cụ thể của tôi. Tôi biết đây là một ví dụ nhỏ nhưng những hình ảnh lớn hơn của tôi cũng giống như vậy và đáng chú ý hơn. Tôi hy vọng tất cả các bạn có thể giúp đỡ. Cảm ơn. :)

So sánh: enter image description here

Trả lời

3

Các bạn đã thử đặt này trong CSS của bạn?

img {-ms-interpolation-mode: bicubic; }

Ngoài ra còn có https://github.com/adamdbradley/foresight.js này trông rất thú vị

Hãy chắc chắn rằng IE9 không có trong chế độ tương thích hoặc IE7 8 chế độ/... IE9 Mode

+0

Cảm ơn! Điều đó làm việc nhưng đối với các phiên bản trước của IE. IE 9 vẫn hiển thị hình ảnh bị lởm chởm. : (Oh well. Tôi sẽ phải kiểm tra kịch bản. Điều đó thực sự trông thú vị. Cảm ơn một lần nữa. – djcloud23

+0

Bạn có phiền gửi cho tôi một liên kết của ví dụ không? Tôi chắc rằng chúng tôi có thể sửa lỗi này ... cũng có bạn kiểm tra IE9 của bạn không phải là trên IE7 hoặc IE8 chế độ? nhấn F12 sau đó bấm vào nơi nó nói Trình duyệt Mode: IE ... – hcharge

0

Lý do này happends nếu vì BitmapData được thực sự trả lại hoàn toàn khác nhau trong trình duyệt IE, điều IE không phải là nó "cắt" pixel đi qua một bộ tỷ lệ quá như mọi 5 pixel nó yanks một pixel và do đó làm cho nó trông giống như nó bỏ lỡ một số thuộc tính gradient.

không nhiều bạn có thể làm về vấn đề này ngoại trừ để giữ tỷ lệ thiết lập khía cạnh nhưng tôi đoán bạn sẽ đã biết rằng mình đã