不同的圖像大小桌面和手機

我剛剛在桌面&移動gtmetrix速度測試，並有錯誤代碼：服務縮放圖像 - 但只在移動速度測試。錯誤如下：不同的圖像大小桌面和手機

* * .jpg將HTML或CSS的大小從1200x431調整爲318x114。提供縮放圖像可節省520.9KiB（減少92％）。

有沒有一個特定的代碼，我可以把圖像放在手機上使其具有一種尺寸，並使桌面保持原始尺寸/其他尺寸。還是有另一種方式，例如爲移動設備（相同圖像尺寸較小）提供特定圖像，然後提供另一個用於提供桌面的圖像？

謝謝。

來源

2013-10-19 Edy

您是否在尋找響應式網站？ –

你應該使用媒體查詢來做到這一點 – 2013-10-19 07:47:15

你可以這樣做，併爲同一類的不同媒體查詢定義不同的背景網址。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
}

來源

2013-10-19 07:48:49

我想你可能想是這樣的：

var isMobile = { 
    Android: function() { 
     return navigator.userAgent.match(/Android/i); 
    }, 
    BlackBerry: function() { 
     return navigator.userAgent.match(/BlackBerry/i); 
    }, 
    iOS: function() { 
     return navigator.userAgent.match(/iPhone|iPad|iPod/i); 
    }, 
    Opera: function() { 
     return navigator.userAgent.match(/Opera Mini/i); 
    }, 
    Windows: function() { 
     return navigator.userAgent.match(/IEMobile/i); 
    }, 
    any: function() { 
     return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); 
    } 
}; 

if(isMobile.any()){ 
    // Mobile! 
} else { 
    // Not mobile 
}

然後，您可以這樣做：（以下未經測試（需要扭捏））

if(isMobile.any()){ 
img { height:140%;width:140%

你可以改變通過樣式標籤的圖像大小。 img {應改變頁面上的所有<img src標籤，就像我以前做過的那樣。上述代碼的修訂版應該僅針對移動或臺式電腦進行修改。

來源

2015-05-19 00:00:50

不同的圖像大小桌面和手機

回答

相關問題