Mobile Srcset противоречивые результаты - PullRequest
Новая
       84

Mobile Srcset противоречивые результаты

0 голосов
/ 28 января 2020

Еще один вопрос о srcset не работает, но я перебрал здесь бесчисленные вопросы, и большинство из них, похоже, либо «открывают ваш тест в приватном окне», либо «srcset не работает в ответе этого браузера».

Я проверил оба вышеперечисленных варианта и до сих пор не могу заставить мое мобильное портретное изображение загружаться последовательно.

Я работаю в FF, и если я сужу окно до менее чем 769 пикселей, оно отображается правильно. Если я использую инструменты разработки для эмуляции мобильных устройств, это не так. Самое главное, если я открою кодовую ручку на своем мобильном телефоне в FF - он также не отображает портретное изображение. Подобные результаты на Chrome.

Я допустил глупую синтаксическую ошибку?

так вот: 

<img class="" 
     srcset="
        https://via.placeholder.com/780x520/91b9c7?text=Standard+Desktop 780w, 
        https://via.placeholder.com/365x520/c49055/3e7a23&text=Mobile+Portrait 365w,
        https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop 1560w"
     sizes="
        (max-width: 768px) 365px,
        (max-width: 768px) and (orientation: portrait) 365px,
        (min-width: 769px) and (orientation: landscape) 780px,
        (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) 1560px,
        (min-resolution: 2dppx) and (orientation: landscape) 1560px,
        365px"
     alt="alt text here">

и вот кодекс: https://codepen.io/chrisby34/pen/gObyQZy

1 Ответ

0 голосов
/ 29 января 2020

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

<picture class="" >
     <source media="(max-width: 768px)" srcset="https://via.placeholder.com/780x520/91b9c7?text=Standard+Desktop">
      <source media="(min-width: 769px) and (orientation: landscape)" srcset="https://via.placeholder.com/365x520/c49055/3e7a23&text=Mobile+Portrait">
      <source media="(-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)" srcset="https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop">
      <source media="(min-resolution: 2dppx) and (orientation: landscape)" srcset="https://via.placeholder.com/1560x1040/c791c7/0011ff&text=Retina+Desktop">
     <img src="low-res.jpg" alt="alt text here">
 </picture>
...