Estoy diseñando una webapp y codificando 2 vistas. Para tablet y mobile. En cada caso hay componentes que no están en la otra y viceversa.
Por ejemplo:
- Tengo una etiqueta
<p>
:<p class="saludo">¡Hola {{user.name}}!, buenos días</p>
En el caso de mobile no quiero que se muestre, pero para tablet si quiero.
Lo que hice fue:
//Tablet 1024px
@media screen and (min-width: 441px) and (max-width: 1024) {
.saludo{
//Estilos correspondientes
}
}
//Mobile 440px
@media screen and (min-width: 0px) and (max-width: 440px) {
.saludo{
display: none;
visibility: hidden;
opacity: 0;
}
}
Esto no me parece del todo correcto (quisiera saber si está bien visto o no) porque al inspeccionar la página y ver los elementos. La etiqueta <p>
para mobile existe.
Estuve buscando y no encontré nada al respecto.
Pero mi consulta era si existe alguna función u opción de Angular para tomar las medidas de la ventana desde el html para usar con la directiva ngIf
. Por ejemplo:
<p class="saludo" *ngIf="window.widht > 440px">¡Hola {{user.name}}!, buenos días</p>
El objetivo es no crear ninguna función para obtener el tamaño de la ventana.
*ngIf
es más usado para ocultar/mostrar elementos si eso depende de eventos o condiciones en la aplicación.