Question

图片元素不尊重视口元标记。任何人都知道如何解决这个问题？

我有这个HTML：

<!DOCTYPE html>
<head>
    <title>dpi</title>

    <meta name='viewport' content='initial-scale=1.0, user-scalable=no'>

    <style type='text/css'>
        body { padding: 50px }

        div.dpi {
            background-image: url(dpi.png);
            background-repeat: no-repeat;
            background-size: 32px 32px;
            width: 32px;
            height: 32px;
            display: inline-block
        }

        @media (min-width: 361px) {
            div.dpi {
                background-image: url(dpi_sm.png);
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <div class='dpi'></div>

    <br>

    <picture>
        <source media='(min-width: 361px)' srcset='dpi_sm.png'>
        <img src='dpi.png' alt='' width='32' height='32'>
    </picture>
</body>

当它在1366px分辨率的标准桌面上运行时，图片元素按预期加载dpi_sm.png。

然而，当它在Android设备中运行时，它会继续加载dpi_sm.png图像。

我测试了，当我将媒体设置为“（min-width：981px）”时，它只加载dpi.png图像。它应该考虑元标记视口，不应该吗？但是缩放是默认的980px，即使视口元标记在那里

div和css媒体查询在两种情况下都能正常工作。只是图片元素是一个问题。

图片元素不尊重视口元标记

0 个答案: