Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$ 
Can Metronic Identify the device?
I need to identify the device from which the user visits us, so I was wondering if Metronic has something already established that allows me to identify if the user is using the application from a computer or from a mobile phone?
Thanks for the help, I'll stay tuned.
Replies (1)
Hi,
Sorry for the late reply.
If you want to change styles based on the screen size then you can use CSS media query.
/* Base styles */
body {
font-family: Arial, sans-serif;
background-color: white;
color: black;
}
/* Styles for screens wider than 600px */
@media (min-width: 600px) {
body {
background-color: lightblue;
color: darkblue;
}
}
/* Styles for screens wider than 900px */
@media (min-width: 900px) {
body {
background-color: lightgreen;
color: darkgreen;
}
}
/* Styles for screens narrower than 400px */
@media (max-width: 400px) {
body {
background-color: lightcoral;
color: darkred;
}
}If you want to detect screen size in your component then you can use the code below:
const screenWidth = ref(window.innerWidth);
const screenHeight = ref(window.innerHeight);
const updateScreenSize = () => {
screenWidth.value = window.innerWidth;
screenHeight.value = window.innerHeight;
};
onMounted(() => {
window.addEventListener("resize", updateScreenSize);
});
onUnmounted(() => {
window.removeEventListener("resize", updateScreenSize);
});Regards,
Lauris Stepanovs,
Keenthemes Support Team
