html5 - Safari CSS rule vh-units? -
Does anyone know that there is a fix for the Safari VH rule?
#what {min-height: 70vh; } In all browsers, work fine, but this is not recognized only in Safari? There is a fix for Safari, can we use the VH rule in CSS?
Instead of using VW / VH, rim with this javascript "run code snippet" creates confusion By doing zooming, its window size changes. To test it, just copy this code into some HTML file and run it in Safari and other browsers (or see "full page").
& lt ;! DOCTYPE html & gt; & Lt; Top & gt; & Lt; Script language = "javascript" type = "text / javascript" & gt; (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 Relay - is required for new Android devices docEl.style.display = "";}; // if the browser does not support addEventListener (! Doc. AddEventListener) return; // test rim support var div = doc.createElement ('div'); div.setAttribute ('style', 'font-size: 1rem'); // abort if the browser does not recognize the reem (div .style.fontSize; = "1rem"); win.addEventListener ('resize', recalc, incorrect); doc.addEventListener ('DOMContentLoaded', recalc, false);}) (ten Documents, windows); & Lt; / Script & gt; & Lt; Style & gt; @chursetts "UTF-8"; * {Padding: 0; Margin: 0}} div {status: fixed; Width: 40%; Height: 30%; Background color: yellow; color blue; Font-size: 0.02rem;} & lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div & gt; In this case 0.01 ram == 1vw you have to remove the body margin. & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; For more clarification, see this article which I have found
Comments
Post a Comment