Question

我刚刚对桌面和桌面进行了速度测试在gtmetrix上移动并有错误代码：服务缩放图像 - 但仅限于移动速度测试。错误如下：

* * .jpg在HTML或CSS中调整大小，范围为1200x431到318x114。提供缩放图像可以节省520.9KiB（减少92％）。

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

感谢。

Answer 1

您可以这样做，并在同一类的不同媒体查询中定义不同的背景网址。

    /* 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标记，因为我之前已经完成了。上述代码的修订版应仅针对移动或台式计算机进行更改。

不同的图像尺寸桌面＆amp;移动

2 个答案: