<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