Question

我希望我的徽标采用SVG格式，这样我就不必担心分辨率而且它一直模糊不清。

我只是将网站放到服务器上，在我的iPhone上打开它，这就是我所看到的：https://i.stack.imgur.com/pAJST.jpg

围绕着CSS做我能想到的一切（我是网络新手）。

发生了什么事？它在Chrome上看起来很棒，但我也只是检查了桌面Safari，它看起来也很模糊。

这是我的两个档案：

的index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="custom.css"/>
    <script defer src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js"></script>
</head>
<body>

    <div class="ui borderless main menu fixed">
        <div class="ui text container" style="max-width: 100% !important">
            <div class="header item">
                <img id="headerLogo" class="logo" src="images/FullLogo_test.svg">
            </div>

            <a href="tel:555-555-5555" class="ui right floated item" tabindex="0">
                <button class="ui inverted black button">Call (555) 555-5555</button>
            </a>
        </div>
    </div>
</body>
</html>

custom.css：

#headerLogo {
    width: 200px;
}

@media only screen
and (min-device-width : 380px)
and (max-device-width : 480px) {

    #headerLogo {
        width: 150px;
    }
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 380px) {

    #headerLogo {
        width: 120px;
    }
}

在Safari和移动版Safari中，SVG文件模糊不清

0 个答案: