<picture>元素無法正常工作 - 部分在新設備上工作

Question

例如，如果有人從移動設備訪問網站，我正嘗試使用<picture>元素來更改我的徽標的大小。

這是我使用的代碼：

<picture> 
    <source srcset="http://www.pixelmedia.ro/ina/wp-content/themes/compass/ina/logo.jpg" media="(min-width: 1125px)"> 
    <source srcset="http://www.pixelmedia.ro/ina/wp-content/themes/compass/images/logo-mobile.jpg" media="(min-width: 768px)"> 
    <source srcset="http://www.pixelmedia.ro/ina/wp-content/themes/compass/images/logo-mobile.jpg" media="(max-width: 1123px)"> 
    <img src="http://www.pixelmedia.ro/ina/wp-content/themes/compass/ina/logo.jpg" alt="alt text examplle!"> 
</picture> 

問題是代碼的工作部分。例如，在我的Android手機上使用最新版本的Chrome，但在Iphone 6上無法使用。

在桌面上完美工作，如果我調整瀏覽器窗口大小，它將更改徽標。但是，許多新平板電腦並非如此。

問題是哪裏出了問題......

非常感謝

Answer 1

不支持iOS上的Safari瀏覽器的像素

http://caniuse.com/#search=picture

Answer 2

的<picture>標籤不能被所有化網頁瀏覽器的認可。如果您只是尋找調整大小的圖像，您可以嘗試css img,embed,object,video{ max-width:100%}或此javascript以強制瀏覽器識別<pict>元素：picturefill