CSS Rule Safari vh-units?

Question

CSS Rule Safari vh-units?

Does anyone know if there is a fix for the Safari vh rule?

#what{ min-height:70vh; }

Everything works fine, in all browsers, but only in Safari it is not recognized? Is there a fix for safari that we can use the VH rule in css?

+3

css html5 safari css3 viewport-units

Schneider Apr 22 '14 at 7:07

source share

2 answers

Andrej Ilic · Answer 1 · 2014-11-02 10:36

Instead of Vw / Vh, use rem with this JavaScript. The “fragment source code” can create confusion because its “resize” window is scaled. To check this, simply copy this code into some html file and run it in Safari and other browsers (or see "Full page").

 <!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>

For a more detailed description, see this article I found. http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing

margarita · Answer 2 · 2017-03-15 13:01

Depending on your code, you can use this trick:

before the vh value, use% or em or pixels so that browsers that don’t support it accept the value:

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

CSS Rule Safari vh-units?

More articles: