Hình ảnh thu nhỏ của safari di động. Làm thế nào để giữ lại?

Question

Tôi có một trang HTML có hình ảnh 1675px x 2640px trong đó. Tôi đã thử xem nó trong một iPad và hình ảnh di động safari downsamples hình ảnh. Chúng tôi muốn hiển thị hình ảnh chất lượng cao nhưng safari hạn chế điều này.

Tôi đã tìm kiếm giải pháp để giữ lại kích thước hình ảnh. Tôi đã xem nó trong iPad 3 trên safari di động. Mọi người đang đề xuất sử dụng một trình duyệt khác nhưng theo mặc định, chúng tôi đang sử dụng safari di động.

Có bất kỳ CSS, JavaScript hoặc giải pháp nào khác cho hạn chế này không?

Answer 1

Tôi chắc chắn bạn sẽ thích câu trả lời này, nhưng câu trả lời ngắn có vẻ là: "bạn sẽ không nhận được 1: 1 hình ảnh có kích thước lớn".

Câu trả lời dài hơn một chút là Apple cố tình buộc mọi thứ phải hoạt động theo cách này bởi vì trước khi nó hoạt động chỉ là không tải hình ảnh hoặc bị lỗi.

Bây giờ, cho một câu trả lời đầy đủ hơn với trích dẫn ...

Apple's Known Resoruces Limits

Có điều là, khi một hình ảnh được giải mã/giải nén nó chiếm một heck toàn bộ rất nhiều dung lượng RAM nhiều hơn những hình ảnh Kích thước tập tin. Công thức của Apple khẳng định là các thiết bị với 512MB RAM, giống như ipad 3 bạn đề cập đến, sẽ từ chối những hình ảnh phi JPEG trên 5 megapixel, kết quả là:

height * width <= 5 * 1024*1024 

Đối với JPEG, Apple nhấn mạnh họ sẽ subsample cho phép bạn xem jpegs:

Kích thước hình ảnh được giải mã tối đa cho JPEG là 32 megapixel bằng cách lấy mẫu con. Hình ảnh JPEG có thể lên đến 32 megapixel do lấy mẫu phụ, cho phép hình ảnh JPEG giải mã thành kích thước có mười sáu pixel. Hình ảnh JPEG lớn hơn 2 megapixel được lấy mẫu con - tức là, được giải mã thành kích thước đã giảm. JPEG subsampling cho phép người dùng xem hình ảnh từ các máy ảnh kỹ thuật số mới nhất.

Lưu ý rằng trạng thái 2 megapixel là giới hạn cho chế độ xem JPEG có kích thước đầy đủ, là 2 * 1024 * 1024. Khi hình ảnh của bạn có kích thước khoảng hơn 4 megapixel, nó sẽ được lấy mẫu trên iPad 3. Và không, thực sự không phải là thứ bạn có thể làm để ép buộc mà không sử dụng chương trình bên ngoài.

Để sử dụng một chương trình bên ngoài để cải thiện tối thiểu, nhìn thấy liên kết này, nơi một người đề nghị GoodReader: Apple Forum, Seeking Full Image Resolution in MiniSfari

Và đây là một Stackoverflow với một tương tự cặp câu hỏi/câu trả lời: Image Size Limitations in Mobile Safari

Answer 2

Để tận hưởng những tính năng võng mạc của iPad Retina và iPhone 4/5, sử dụng tăng gấp đôi kích thước hình ảnh như sau:

<img src="test.jpg" width="837" height="1320" /> 

Lưu ý kích thước được giảm xuống còn một nửa, nhưng test.jpg không yêu cầu thay đổi kích thước .

Ngoài ra, bạn có thể chuẩn bị một bộ đồ họa độ phân giải cao, và hiển thị nó khi màn hình võng mạc được phát hiện, sử dụng phương tiện truy vấn (Modernizr)

Pixel Density Theory: Retina màn hình đặt 2 pixel vào 1 pixel, ví dụ: với chiều rộng 320px, nó thực sự chứa nội dung 640px. Đọc thêm tại đây: http://www.sitepoint.com/css-techniques-for-retina-displays/

Answer 3

Mobile Safari does not downsample progressive JPEGs. Giả sử JPEG là một định dạng có thể chấp nhận cho mục đích của bạn, chỉ cần chuyển đổi chúng sang mã hóa lũy tiến. Giả sử bạn có một hình ảnh JPEG hiện tại, không tiến bộ, bạn có thể sử dụng một công cụ như jpegtran để chuyển đổi mã hóa không thành công sang quét liên tục.