¿Cómo obtener el ancho del dispositivo (no la ventana gráfica)?

Question

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.

html css media-queries viewport

-1

Riley Fitzpatrick 27 sep. 2019 a las 01:29

Answer 1

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.

1

Gosi 27 sep. 2019 a las 03:01

Answer 2

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 );
}

0

조원민 27 sep. 2019 a las 01:31

Answer 3

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

0

William Enrique Pereira Carras 27 sep. 2019 a las 00:59

¿Cómo obtener el ancho del dispositivo (no la ventana gráfica)?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html