Эксперименты с тегом picture + srcset (адаптивные изображения)

A
На сайте с 12.10.2011
Offline
220
1601

Всем привет,

Делаю первый раз адаптивный дизайн, выбрал вариант с picture + srset, вот что получилось:

<picture>
<source srcset="IMG_0081-382x255.jpg" media="(max-width: 382px)" />
<source srcset="IMG_0081-768x512.jpg" media="(max-width: 768px)" />
<source srcset="IMG_0081-800x533.jpg" media="(max-width: 800px)" />
<source srcset="IMG_0081-1360x906.jpg" media="(max-width: 1360px)" />
<source srcset="IMG_0081-1600x1066.jpg" media="(min-width: 1361px)" />
<img src="IMG_0081-800x533.jpg" alt="">
</picture>

Ниже указан девайс и рядом какую фото отображает, и далее комментарий. Несмотря на то, что есть вопросы по отображению конкретной фото в каждом случае, само качество фото вроде нормальное, при этом во всю ширину экрана.

notebook (показывает фото 1600 при разрешении 1366)

вроде верно

notebook (показывает фото 1360 при разрешении 1360)

вроде верно

notebook (показывает фото 1360 при разрешении 1240)

вроде верно

desktop (показывает фото 1360 при разрешении 1280)

вроде верно

iphone 4 (показывает портрет: 800, альбом: 800)

почему в iphone 4 при разрешении 640×960 (если верить интернету) показывает в портретном 800 (не 768), а в альбомном тоже 800 (не 1360)?

iphone 6 (показывает портрет: 382, альбом: 768)

В iphone 6 при разрешении 1334×750 (если верить интернету) для портрета показывает 383, вроде правильно? Но в альбомном показывает 768, хотя должен 1360 (ведь 1334 больше 768)?

ipad модель A1566 (показывает портрет 768, альбом 1360)

Интернет говорит о разрешении 1536x2048, В портретной показывает 768 (почему не 1600?), в альбомной 1360 (почему не 1600?), видимо я что-то не понимаю..

Вопросы:

1) Не совсем понятно почему себя так ведут iphone и ipad

2) Видел на некоторых сайтах настройки типа media="(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)">, стоит ли добавлять также эти параметры?

3) Стоит ли заморачиваться с ретиной? Т.е. нужно иметь вдвое больше по размеру фото? Я так понял в Iphone 6 как раз ретина, и по качеству вроде фото нормально отображается.

Вот пример:

<picture>
<source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
<source srcset="default.jpg, default_retina.jpg 2x">
<img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>
A
На сайте с 12.10.2011
Offline
220
#1

C iphone 6 вроде разобрался, выходит что это Ретина, и реальное разрешение в 2 раза меньше, не 1334×750, а 667х375, так?

А вот с Iphone 4 пока полная загадка..

D
На сайте с 14.01.2007
Offline
153
#2

гуглить: device pixel ratio

коротко: если Apple говорит, что у айфона разрешение 1000*500, а dpr=2, то браузер будет "видеть" 500*250

L
На сайте с 18.05.2015
Offline
67
#3
Dinozavr:
гуглить: device pixel ratio
коротко: если Apple говорит, что у айфона разрешение 1000*500, а dpr=2, то браузер будет "видеть" 500*250

проблема в том, что если Apple говорит, что у айфона разрешение 1000*500, то и будет 1000 на 500.

<img class="swapImages"

srcset="assets/images/content/large.jpg 1200w,

assets/images/content/medium.jpg 800w,

assets/images/content/small.jpg 400w"

sizes="100vw"

src="assets/images/content/small.jpg"

alt="responsive image">

Борюсь сейчас с этой проблемой, как нормально реализовать, чтобы на мобилках small, на pda medium, а на декстопах large.

В реальности на мобилку подтягивается medium/large, если у вас не реликтовый образец.

Есть у кого нормальное решение, а то в чем смысл srcset, если оно не работает как нужно?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий