Estoy tratando de usar los valores CSS vw y vh en Javascript porque me gustaría adaptarlos para cambiar ciertas variables JS. Sin embargo, después de investigar diferentes métodos, los valores parecen estar un poco fuera de lugar porque está estropeando mi pantalla. He intentado usar:
viewPortWidth = window.innerWidth; viewPortHeight = window.innerHeight;y
viewPortWidth = document.documentElement.clientWidth; viewPortHeight = document.documentElement.clientHeight;Pero no parece que funcionen.
¿Alguien tiene alguna idea? ¡Cualquier ayuda es muy apreciada!
¡Gracias!
Todo está bien, simplemente concatene viewPortWidth y viewPortHeight con "px" , así,
viewPortWidth = window.innerWidth + "px"; viewPortHeight = window.innerHeight + "px";Creo que esto funcionará bien, pruébalo.
// console.log(document.body.getBoundingClientRect(),window.innerWidth, window.innerHeight); var getrects=()=>["top","left","height","width", "x","y","right","bottom" ].map(a=>[a,document.body.getBoundingClientRect()[a]]).concat([['window height',window.innerHeight],["window width",window.innerWidth]]); //var entries0=getrects(); //entries0.forEach(a=>console.log(a)); const tabler=( tbl=document.getElementById("table"), entries=getrects())=>(tbl.innerHTML='', tbl.innerHTML=`<thead> <tr>${entries.map(a=>`<th>${a[0]}</th>`).join("")}</tr></thead> <tbody><tr>${entries.map(a=>`<td>${Math.round(a[1])}px</td>`).join("")}</tr></tbody>` ); window.addEventListener("resize",e=>tabler()); tabler(); * { box-sizing: border-box; margin:1em; } ::-webkit-scrollbar { display: none; } html{padding:0; margin:0;} body{margin:0;padding:0; position: absolute; left:0; right:0; top: 0; bottom: 0px; background-color: aliceblue; } table { margin: 1em; background-color: #f8f9fa; /* border: 1px solid */ border-collapse: collapse; color: #000; border: #a2a9b1 ridge 1px; font-size: 100%; display: table; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; margin: 1em 0; background-color: #f8f9fa; /* border: 4px solid #a2a9b1; */ border-collapse: collapse; color: #000; } caption{font-weight: 600; border: #a2a9b1 ridge 1px;background: white; border-bottom: 0px; padding: .3em;} tbody{ display: table-row-group; vertical-align: middle; border-color: inherit; } tr { display: table-row; vertical-align: inherit; border-color: inherit; padding: .2em; } tr > th { background-color: #eaecf0; text-align: center; } tr > th, tr > td { border: 1px solid #a2a9b1; padding: 0.2em 0.4em; } th.thleft{ text-align: left; padding-right: 1.6em; } p{margin:1em;} <h4>The css you likely want is below</h4> <code> * { box-sizing: border-box; } ::-webkit-scrollbar { display: none; } html{padding:0; margin:0;} body{margin:0;padding:0; position: absolute; left:0; right:0; top: 0; bottom: 0px; background-color: aliceblue; } </code> <p> Then just check window.innerWidth and innerHeight as well as the bounding rects on document.body... </p> <p> you can also propertize the body rects nad then just pass them down your node tree.</p> <table id="table"> </table>echa un vistazo a este bolígrafo que obtiene vh y vw tanto del elemento del cuerpo como de la ventana interior. Mueva la barra lateral y los domrects en la tabla cambiarán al cambiar el tamaño.