HTML IMG srcset /尺寸不工作在iPhone 4S

我已經創建了一個基於埃裏克·波蒂斯的優秀文章「Srcset and sizes」的網頁，但它不是我的iPhone 4S的正常工作。據我瞭解，4s是320虛擬（或CSS）像素寬，但由於4S有一個Retina顯示器，這實際上轉換爲640（= 2 x 320）虛擬像素。當我在iPhone上查看下面的代碼（縱向模式）時，我看到兩行「大」圖像，兩行中的每一行中的每個圖像佔據視口寬度的三分之一。我不認爲這是正確的。HTML IMG srcset /尺寸不工作在iPhone 4S

如果我正確理解了我的img大小屬性，它表示如果瀏覽器發現視口的最小寬度爲768像素，則每個圖像佔用視口寬度的1/3。否則，佔用100％：

sizes='(min-width: 768px) 33.3vw, 100vw'

但因爲我的iPhone視口的寬度爲640個像素，我不應該被看到每行一個圖像與每個圖像佔用視口的整個寬度？

正如你所看到的，我使用的是斯科特Jehl的picturefill填充工具，使瀏覽器不會默認爲src屬性的圖像URL。我的小型，中型和大型圖像的寬度分別爲100,200和300像素。任何人都可以解釋我做錯了什麼？

感謝您的幫助！

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Test Srcset/Sizes</title> 
    <style type="text/css"> 
     * { box-sizing: border-box; } 
     body, figure { margin: 0; } 
     img { display: block; width: 100%; } 
     body { 
      font-family: Arial, sans-serif; 
      text-align: center; 
     } 
     h1 { 
      font-family: Arial; 
      font-size: 2em; 
      margin: 0.5em; 
      text-align: center; 

     } 
     figure { 
      padding: 1px; 
     } 
     @media (min-width: 768px) { 
      figure { 
       display: block; 
       float: left; 
       width: 33.3333333333333%; 
      } 
     } 
    </style> 
    <script> 
    document.createElement("picture"); 
    </script> 
    <script src="../js/picturefill.min.js" async></script> 
</head> 

<body> 
    <h1>Srcset and Sizes</h1> 
    <main> 
    <figure> 
     <img src='img/mine/small-1.jpg' 
      srcset='img/mine/large-1.jpg 300w, 
        img/mine/medium-1.jpg 200w, 
        img/mine/small-1.jpg 100w' 
      sizes='(min-width: 768px) 33.3vw, 
        100vw' 
      alt="Image 1" /> 
    </figure><!-- 

    --><figure> 
     <img src='img/mine/small-2.jpg' 
      srcset='img/mine/large-2.jpg 300w, 
        img/mine/medium-2.jpg 200w, 
        img/mine/small-2.jpg 100w' 
      sizes='(min-width: 768px) 33.3vw, 
        100vw' 
      alt="Image 2" /> 
    </figure><!-- 

    --><figure> 
     <img src='img/mine/small-3.jpg' 
      srcset='img/mine/large-3.jpg 300w, 
        img/mine/medium-3.jpg 200w, 
        img/mine/small-3.jpg 100w' 
      sizes='(min-width: 768px) 33.3vw, 
        100vw' 
      alt="Image 3" /> 
    </figure><!-- 

    --><figure> 
     <img src='img/mine/small-4.jpg' 
      srcset='img/mine/large-4.jpg 300w, 
        img/mine/medium-4.jpg 200w, 
        img/mine/small-4.jpg 100w' 
      sizes='(min-width: 768px) 33.3vw, 
        100vw' 
      alt="Image 4" /> 
    </figure><!-- 

    --><figure> 
     <img src='img/mine/small-5.jpg' 
      srcset='img/mine/large-5.jpg 300w, 
        img/mine/medium-5.jpg 200w, 
        img/mine/small-5.jpg 100w' 
      sizes='(min-width: 768px) 33.3vw, 
        100vw' 
      alt="Image 5" /> 
    </figure><!-- 

    --><figure> 
     <img src='img/mine/small-6.jpg' 
      srcset='img/mine/large-6.jpg 300w, 
        img/mine/medium-6.jpg 200w, 
        img/mine/small-6.jpg 100w' 
      sizes='(min-width: 768px) 33.3vw, 
        100vw' 
      alt="Image 6" /> 
    </figure> 
</main> 
</body> 
</html>

來源

2014-10-06 William

我認爲你的問題可能是你正在使用最小寬度。在媒體查詢中使用最小寬度時，告訴瀏覽器在瀏覽器窗口大於以下值時應用以下樣式。我相信如果你在這種情況下使用最大寬度，你會得到所需的結果。

這裏的an article關於這一主題的多一點信息。

來源

2014-10-06 17:30:28

我不使用最小寬度認爲是問題。尺寸屬性是說如果寬度> = 768，顯示三個圖像，每個屏幕寬度的33.3％。但即使寬度小於768，也是如此。 – William 2014-10-06 22:03:23

啊，我想我之前被誤解了。我也有點懶惰，沒有花時間閱讀你第一次鏈接的文章。就這樣說，我不確定爲什麼這不起作用在您的手機瀏覽器。它在這裏工作正常：http://jsfiddle.net/ctgunn/hzfLhuL1/。根據這一點，我認爲它應該得到支持，除非你的手機上的瀏覽器不是最新的。 http://caniuse.com/#search=srcset。希望這會有所幫助。 – 2014-10-07 20:39:25

Safari不支持sizes，也不支持srcset的w描述符。 WebKit nightlies支持它，但它在Safari分支中沒有打開，就測試節目而言。

你的例子在Chrome 38 AFAICT工作正常。

來源

2014-10-21 13:18:24

HTML IMG srcset /尺寸不工作在iPhone 4S

回答

相關問題