Menu
Does anybody know if there is a fix for Safari vh rule?
#what{
min-height:70vh;
}
All working ok, in all browsers, but only in Safari it is not recognized? Is there a fix for safari, that we can use VH rule in css?
490
Viewport units: vw, vh, vmin, vmax is Fully Supported on Safari 15, which means that any user who'd be accessing your page through Safari 15 can see it perfectly.
What are VH Units? The full form of VH is viewport height. It works like the percentage unit as well. Specifying 10vh is equivalent to occupying 10% of entire visible screen height. Look at this demo to see how it works:👇 .text { display: none; } .box { width: 300px; height: 50vh; /* display: none; */ }
vh and vw in actionTo use vh and vw values, just type “Nvh” or “Nvw” (where “N” represents the percentage of the viewport you'd like to cover) into any width or height field. So to cover 100% of the viewport, you'd set 100% for the width and 100vh for the height.
Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
Instead of Vw/Vh, use rem with this JavaScript. The "run code snippet" might create confusion, cause its window "resizes" by zooming. To test this, just 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 more explenation, see this article that I ve found. http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With