i am in need of knowing the current screen resolution of my clients in their browsers.
i need this information in order to do calculations.
this will be my function:
scope.$watch('**??what,should,go,here??**', function() {
scope.screen = (window.innerWidth / 2) - 150;
});
as you can see i want to use a regular $watch function. my problem is that i don't know what to watch. i tried watching window.innerWidth but this doesn't worked. i supposed because this will only give a value for the first time.
i believe there is a simple solution probably.
thanks.
i am in need of knowing the current screen resolution of my clients in their browsers.
i need this information in order to do calculations.
this will be my function:
scope.$watch('**??what,should,go,here??**', function() {
scope.screen = (window.innerWidth / 2) - 150;
});
as you can see i want to use a regular $watch function. my problem is that i don't know what to watch. i tried watching window.innerWidth but this doesn't worked. i supposed because this will only give a value for the first time.
i believe there is a simple solution probably.
thanks.
Share Improve this question edited Aug 9, 2020 at 20:13 callback 4,1221 gold badge34 silver badges57 bronze badges asked Sep 22, 2013 at 21:54 lobengula3rdlobengula3rd 1,8515 gold badges27 silver badges39 bronze badges3 Answers
Reset to default 8Bind to onresize, e.g.
window.addEventListener("resize", function () {
// check width
});
You can use this
window.addEventListener("resize", function () {
// scripts
}
But it looks like you want to style the page based on the window size, so using .clientWidth along with it I believe is what you're looking for
window.addEventListener("resize", function () {
if (document.clientWidth < 900) {
// scripts
}
}
Or, assuming it is for styling purposes, you could use CSS @media queries like so
@media (max-width: 900px) and (min-width: 300px) {
// CSS
}
You can also use this:
window.onresize = changingOnResizing;
function changingOnResizing() {
// enter your code
}