2

我刚刚在 gtmetrix 上对桌面和移动设备进行了速度测试，并出现错误代码：Serve Scaled Images - 但仅限于移动速度测试。错误如下：

* * .jpg 在 HTML 或 CSS 中从 1200x431 调整为 318x114。提供缩放图像可以节省 520.9KiB（减少 92%）。

是否有一个特定的代码可以与图像一起放置，以便在移动设备上使用一种尺寸，而在桌面上使用原始/其他尺寸。或者是否有另一种方式，例如为移动设备提供特定图像（相同的图像尺寸更小），然后为桌面提供另一个图像？

谢谢。

4

2 回答 2

0

您可以这样做并在同一类的不同媒体查询上定义不同的背景 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 */
}
于 2013-10-19T07:48:49.540 回答
0

我想你可能想要这样的东西：

    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-19T00:00:50.227 回答