[英]watching window.innerWidth for changes in the browser resolution using $watch with javascript
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.如您所见,我想使用常规的 $watch 函数。 my problem is that i don't know what to watch.
我的问题是我不知道该看什么。 i tried watching window.innerWidth but this doesn't worked.
我试过看 window.innerWidth 但这不起作用。 i supposed because this will only give a value for the first time.
我想是因为这只会第一次给出一个值。
i believe there is a simple solution probably.我相信可能有一个简单的解决方案。
thanks.谢谢。
Bind to onresize
, eg绑定到
onresize
,例如
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但看起来您想根据窗口大小设置页面样式,因此我相信将
.clientWidth
与它一起使用是您正在寻找的
window.addEventListener("resize", function () {
if (document.clientWidth < 900) {
// scripts
}
}
Or, assuming it is for styling purposes, you could use CSS @media
queries like so或者,假设它是用于样式目的,您可以像这样使用 CSS
@media
查询
@media (max-width: 900px) and (min-width: 300px) {
// CSS
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.