Mobilne safari z możliwością próbkowania dużych zdjęć. Jak zatrzymać?

Question

Mam stronę HTML z obrazem 1675 na 2640 pikseli. Próbowałem oglądać go na iPadzie i najwyraźniej mobilne safari zestandaryzowało obrazy. Chcieliśmy pokazać obraz wysokiej jakości, ale safari to ogranicza.

Szukałem rozwiązania, które pozwoli zachować rozmiar obrazu. Oglądałem go na iPadzie 3 na mobilnym safari. Ludzie sugerują korzystanie z innej przeglądarki, ale domyślnie używamy mobilnego safari.

Czy istnieje jakieś rozwiązanie CSS, JavaScript lub inne rozwiązanie tego ograniczenia?

Answer 1

Jestem pewna, że ​​po prostu pokochasz tę odpowiedź, ale krótka odpowiedź brzmi: "nie dostaniesz dużych zdjęć 1: 1".

Nieco dłuższa odpowiedź brzmi, że Apple celowo zmusza do działania w ten sposób, ponieważ przedtem działało tylko po to, aby w ogóle nie załadować obrazu lub nie zawiesić go.

Teraz na pełniejszą odpowiedź z cytatów ...

Apple's Known Resoruces Limits

Chodzi o to, gdy obraz jest dekodowany/dekompresji zajmuje cały kawał dużo więcej miejsca niż obrazy RAM rozmiar pliku. Formuła firmy Apple twierdzi, że urządzenia z 512 MB pamięci RAM, jak iPad 3 można wymienić, odmówi obrazów non-JPEG powyżej 5 megapikseli, co skutkuje:

height * width <= 5 * 1024*1024 

JPEG, Apple stwierdza będą podpróba aby umożliwić do obejrzenia jpegs:

Maksymalny rozmiar dekodowanego obrazu JPEG to 32 megapiksele z podpróbkowaniem. Obrazy JPEG mogą mieć do 32 megapikseli ze względu na podpróbkowanie, które pozwala na dekodowanie obrazów JPEG do rozmiaru, który ma jedną szesnastą liczbę pikseli. Obrazy JPEG większe niż 2 megapiksele są podpróbkowane - to znaczy dekodowane do mniejszego rozmiaru. Podpróbkowanie JPEG pozwala użytkownikowi przeglądać obrazy z najnowszych aparatów cyfrowych.

Należy zauważyć, że 2 megapiksele to limit dla pełnowymiarowego wyświetlania JPEG, czyli 2 * 1024 * 1024. Ponieważ obraz ma z grubsza nieco ponad 4 megapiksele, zostanie podpróbkowany na iPadzie 3. I nie, naprawdę nie ma nic, co można zrobić, aby wymusić to bez użycia zewnętrznego programu.

Aby użyć zewnętrznego programu do minimalnej poprawy, zobacz ten link, gdzie dana osoba zaleca GoodReader: Apple Forum, Seeking Full Image Resolution in MiniSfari

I tu jest kolejny stackoverflow podobną parę Pytanie/odpowiedź: Image Size Limitations in Mobile Safari

Answer 2

Aby korzystać z funkcji siatkówki iPad Retina oraz iPhone 4/5, korzystanie podwoiła wielkość obrazu następująco:

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

Uwaga wymiar jest zmniejszona o połowę, ale test.jpg nie wymaga zmiany rozmiaru .

Alternatywnie, można przygotować inny zestaw grafiki o wysokiej rozdzielczości i pokazać go, gdy zostanie wykryty ekran siatkówki, za pomocą programu Media Queries (modernizr)

Pixel Theory gęstość: ekran Retina stawia 2 pikseli na 1 piksel, np. z szerokością 320px, w rzeczywistości zawiera ona zawartość 640px. Przeczytaj więcej tutaj: http://www.sitepoint.com/css-techniques-for-retina-displays/

Answer 3

Mobile Safari does not downsample progressive JPEGs. Zakładając JPEG stanowi akceptowalny format dla swoich celów, po prostu przekonwertuj je na progresywne kodowanie. Zakładając, że masz istniejący nieprzerwany obraz JPEG, możesz użyć narzędzia takiego jak jpegtran do bezstratnej konwersji kodowania na skanowanie progresywne.