不同圖像尺寸的台式機和手機

Question

我只是在gtmetrix上的台式機和移動設備上進行了速度測試，並顯示錯誤代碼：Serve Scaled Images-但是僅在移動速度測試上。 錯誤內容如下：

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

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

謝謝。

Answer 1

您可以這樣做，並在同一類的不同媒體查詢上定義不同的背景URL。

    /* 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 */
}

Answer 2

我認為您可能想要這樣的事情：

    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標簽。 修改以上代碼后，應僅對移動或台式計算機進行更改。