SVG файл размыт в Safari и мобильном Safari - PullRequest
Новая
       42

SVG файл размыт в Safari и мобильном Safari

0 голосов
/ 06 июня 2018

Я хотел, чтобы мой логотип был в формате SVG, чтобы мне не приходилось беспокоиться о разрешении, и он когда-либо был размытым.

Я просто поместил веб-сайт на сервер, открыл его на своем iPhone,и вот что я вижу: https://i.stack.imgur.com/pAJST.jpg

Перепутаны с CSS, делающим все, что я мог придумать (я новичок в Web).

Что происходит?Он отлично смотрится в 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;
    }
}
...