Estoy creando mi primer sitio web y mi etiqueta meta
solo define un ancho constante en lugar de tomar el ancho del dispositivo, porque me estoy divirtiendo con las animaciones CSS y quería evitar que sea dinámico. La mayor parte se ve bien en dispositivos móviles, excepto las cosas que deben centrarse. Cuando lo centro en función de porcentajes, se centra en función del ancho que configuré (mi ventana gráfica) en lugar del ancho del dispositivo. Esto no es un error, por supuesto, pero me preguntaba si había una forma de obtener el ancho del dispositivo, incluso si no lo configuro como la ventana gráfica, por lo que puedo calcular el left
atributo para centrarlo. ¿Algunas ideas? ¡Gracias!
No puse el código porque realmente no hay ningún problema, es más una pregunta práctica.
3 respuestas
Para encontrar el ancho actual de su cuerpo html (dispositivo), puede probar este código javascript window.innerWidth;
Intente ejecutar este código y cambie el tamaño de sus ventanas a diferentes anchos:
function myFunction() {
var wid = window.innerWidth;
document.getElementById("display").innerHTML = "Width: " + wid;
}
<button onclick="myFunction()">Show</button>
<div id="display"></div>
Ps: haga clic en Ejecutar código y luego haga clic en la página completa para que pueda cambiar el tamaño de su navegador y probar mi fragmento. Le mostrará el ancho actual.
Recomiendo el atributo flex css .
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Html
<div class="wrapper">
wrapper
<div class="inner"> inner </div>
</div >
Css
.wrapper {
display: flex;
justify-content: center;
width: 200px;
}
.wrapper .inner {
width: 50px;
}
O
Usando absoluta y relativa
wrapper {
position: absolute;
width: 200px;
}
wrapper parent {
position: relative;
width: 50px;
left: calc( 100% - 25px );
}
A veces, algunos usuarios no maximizan sus navegadores cuando se trata de dispositivos de escritorio. Pero puede intentar tomar el ancho del "cuerpo" de su aplicación creando una variable. Algo más avanzado es verificar si hay alguna variación positiva de ese valor durante la navegación. En dispositivos móviles, ese valor sería un poco más preciso, a menos que se gire la pantalla.
your_var_name = document.body.clientWidth
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].