Hello everybody.
I did the assessment for multimedia and embedding module on MDN (Mozilla splash page) .
But there’s a problem and I made my own sample code to ask my question. and here’s the project page and live demo:
Project page / Live example 1 / Live example 2.
This is the problem:
Please, first check the live example. In the live example there’s two images and above each one is a copy of the HTML code used for the corresponding image. I’ve used <picture> element for the first image and <img srcset="…" sizes="…"> element for the second one so that if the page is loaded on a mobile device, the mobile version of images must be shown (I labeled mobile version images with “mobile-version” so it’s obvious when the mobile version is being displayed). But, when i open the live example on my mobile phone the first picture image being shown (which uses <picture> element) is the mobile version but the second one (which uses <img srcset=…" sizes="…">) is not the mobile version. And I’m confused why, because for both methods I’ve used same media condition (max-width: 800px) but it seems the first media condition evaluates to true but the socond one does not. (when I used inspect on desktop browser and make the viewport narrow both methods work and show mobile version images) The same problem happens for the mozilla splash page example.
Thanks for help in advance.