Safari CSS правило VH-единиц?

Question

Safari CSS правило VH-единиц?

Кто-нибудь знает, есть ли исправление для Safari vh rule?

#what{
 min-height:70vh;
}

Все работает нормально, во всех браузерах, но только в Safari это не распознается? Есть ли исправление для сафари, что мы можем использовать правило VH в CSS?

6

css html5 css3 safari viewport-units

Источник

user3165604 22 апр '14 в 07:07

2 ответа

Другие вопросы по тегам css html5 css3 safari viewport-units

user5993023 15 мар '17 в 13:01 2017-03-15 13:01 · Answer 1 · 2017-03-15 13:01

В зависимости от вашего кода, вы можете использовать этот трюк:

перед значением vh используйте% или em, или пиксели, чтобы браузеры, которые его не поддерживают, принимали значение:

.this{
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
}

1

Источник

user5993023 15 мар '17 в 13:01

user4076270 02 ноя '14 в 10:36 2014-11-02 10:36 · Answer 2 · 2014-11-02 10:36

Вместо Vw/Vh используйте rem с этим JavaScript. "Фрагмент кода выполнения" может создать путаницу, потому что его окно "изменяет размеры" при увеличении. Чтобы проверить это, просто скопируйте этот код в некоторый HTML-файл и запустите его в Safari и других браузерах (или см. "Полная страница").

<!DOCTYPE html>
<head>
<script language="javascript" type="text/javascript">
(function (doc, win) {
        var docEl = doc.documentElement,
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;

                docEl.style.fontSize = clientWidth + 'px';
                docEl.style.display = "none";
                docEl.clientWidth; // Force relayout - important to new Android devices
                docEl.style.display = "";
            };
 
        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;

        // Test rem support
        var div = doc.createElement('div');
        div.setAttribute('style', 'font-size: 1rem');

        // Abort if browser does not recognize rem
        if (div.style.fontSize != "1rem") return;

        win.addEventListener('resize', recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<style>
    @charset "utf-8";
    *{padding: 0;margin: 0;}
    div {position:fixed;width:40%;height:30%;background-color:yellow;color:blue;font-size:0.02rem;}
</style>
</head>

<body>
    <div>in this case 0.01 rem == 1vw . You need to remove body margins.</div>
</body>

</html>

Для более подробного объяснения, см. Эту статью, которую я нашел. http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing