Адаптивные изображения с помощью srcset/размеры не уважают Safari прошивкой

У меня есть следующиеАдаптивные изображения с помощью srcset/размеры не уважают Safari прошивкой

 <img 
      src="/img/footer/logo_white.png?v=2.0" 
      srcset="/img/footer/logo_white.png?v=2.0 1x, 
        /img/footer/logo_white2x.png?v=2.0 2x" 
     >

, который отлично работает на нормальных и HiDPI экранах.

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

  <img 
       class="biw-logo" 
       sizes="(max-width: 390px) 110px, 175px" 
       src="/img/footer/biw_logo.png?v=2.0" 
       srcset="/img/footer/biw_logo_small.png?v=2.0 110w, 
         /img/footer/biw_logo.png?v=2.0 175w, 
         /img/footer/biw_logo2x.png?v=2.0 350w" 
      >

, который работает в условиях, показывающий _small изображения для видовых ниже 390 пикселей - но теперь я потерял «высокое разрешение» фактор; Я не могу заставить браузер iOS в iphone5s отображать 220px-изображение длиной 110px с вышеупомянутым синтаксисом.

Не могли бы вы исправить мой синтаксис?

<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w, 
 
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">

источник

2016-11-25 George Katsanos

Какую версию iOS вы использовали для проверки разметки изображения? Вам нужно, по крайней мере, iOS 9, чтобы работать с дескрипторами 'w'. Информацию о поддержке браузера вы можете найти здесь: http://caniuse.com/#feat=srcset – ausi

часть загадки решена. Я использовал симулятор 8.x для моего тестирования .. какие-то резервные или способы вокруг него? –

хорошо, поэтому я добавил 110w в качестве первого логотипа, его подобрал 8.x (я думаю, что он основан на заказе, если он не понимает дескрипторы 'w'), а остальное отлично работает. –

Вы можете сделать это с srcset и sizes. В первом сообщить браузеру, какие изображения вы имеете в наличии и сколько пикселей в ширину эти изображения, это может быть сделано с srcset:

<img srcset=" 
    /img/footer/logo_white.png?v=2.0 300w, 
    /img/footer/logo_white2x.png?v=2.0 600w, 
    /img/footer/logo_white_small.png?v=2.0 150w 
">

Теперь браузер знает, что он может выбрать один из трех изображений, 150, 300 и 600 пикселей (я догадывался о размерах, фактическая ширина может отличаться).

Во-вторых, вы сообщаете браузеру, насколько большое изображение будет отображаться на веб-странице, это может быть достигнуто с sizes:

<img 
    sizes="(max-width: 400px) 150px, 300px" 
    srcset="..." 
>

Теперь браузер знает, что если ширина окна просмотра является 400px или менее изображение будет отображаться в 150 пикселей по ширине, а для просмотров размером более 400 пикселей отображается 300 пикселей в ширину.

Этого достаточно для просмотра браузера, чтобы выбрать правильное изображение. На обычном рабочем столе с обычным экраном он выберет изображение 300w, а на рабочем столе HiDPI будет 600w. В небольшом окне просмотра с обычным экраном будет выбрано 150w и на небольшом окне просмотра с HiDPI 300w.

Если вы хотите получить дополнительную информацию о srcset и sizes, взгляните на http://ericportis.com/posts/2014/srcset-sizes/.

источник

2016-11-26 19:42:38 ausi

hey @ausi спасибо :) дьявол в деталях :), так что у меня есть: - изображение шириной 150 пикселей, которое будет отображаться в не сетчатке, изображение размером 300 пикселей (2x), которое будет отображаться на hiDpi (сетчатке), но все же отображается как 150px в ширину с точки зрения того, сколько места занимает он - и меньшая версия для видовых экранов размером меньше 450 пикселей, что должно занимать 80 пикселей (но на самом деле это файл размером 160 пикселей, так как это только сетчатка). –

Тогда ваш атрибут 'sizes' должен выглядеть например «размеры =» (max-width: 450px) 80px, 150px «' и '... w' в' srcset' должны отражать ширину ваших изображений. – ausi

Спасибо @ausi: к сожалению, я до сих пор не могу получить синтаксис .. Я устанавливаю 'размеры =" (max-width: 450px) 80px, 150px "', но я не могу получить изображения '_small.png' для отображения насколько они должны. По сути, я не получаю отношение «размеры» к дескрипторам '* w' рядом с изображениями. (Я получаю 1x и 2x), но когда размеры и 'w' вводятся в игру, я теряю ее :) –

Адаптивные изображения с помощью srcset/размеры не уважают Safari прошивкой

ответ

Смежные вопросы