javascript - javascript中的多个媒体查询
问题描述
我正在尝试使用 Javascript 检查屏幕大小。我的元素将根据屏幕大小进行不同的动画处理。
我认为我离结果并不太远,但没有真正完全理解它。
当我加载页面时,无论窗口大小如何,都会有一个 console.log 出现两次。
通过手动缩小窗口,通过拖动鼠标,有: - 2 console.log('MD') 当 MD 的大小是好的 - 1 console.log('SM') 当 SM 的大小是好的
通过手动放大窗口,通过拖动鼠标,有: - 1 console.log('MD') 当 MD 的大小是好的 - 1 console.log('SM') 当 LG 的大小是好的 - 1 console.log('LG') 当 LG 的大小没问题时
但是通过使用浏览器图标调整窗口的大小,我的console.log 就如我所愿。
是否有可能有更多的解释?
我希望我已经说清楚了。
let mqls = [
window.matchMedia('screen and (min-width: 768px) and (max-width: 991px'),
window.matchMedia('screen and (min-width: 992px)')
];
function test(mql){
if( mqls[0].matches ){
console.log('MD')
}
else if( mqls[1].matches ){
console.log('LG')
}
else if( !mqls[0].matches && !mqls[1].matches ){
console.log('SM')
}
}
for ( let i =0; i < mqls.length; i++ ){
test(mqls[i]);
mqls[i].addListener(test);
}
解决方案
function checkScreen(){
const checkMobile = window.matchMedia('screen and (max-width: 575px)');
const checkTablet = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)');
const checkDesktop = window.matchMedia('screen and (min-width: 992px)');
checkMobile.addListener(function(e){
if(e.matches) {
console.log('MOBILE');
}
});
checkTablet.addListener(function(e){
if(e.matches) {
console.log('TABLET');
}
});
checkDesktop.addListener(function(e){
if(e.matches) {
console.log('DESKTOP');
}
});
}
checkScreen()
我想通了,但也许有更好的解决方案?
已编辑
使用上面的解决方案,当我的页面加载或刷新时,我的功能不会启动,所以我必须这样做
mobile();
function mobile(){
const mql = window.matchMedia('screen and (max-width: 575px)');
checkMedia(mql);
mql.addListener(checkMedia);
function checkMedia(mql){
if(mql.matches){
console.log('Mobile');
}
}
}
tablet();
function tablet(){
const mql = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)');
checkMedia(mql);
mql.addListener(checkMedia);
function checkMedia(mql){
if(mql.matches){
console.log('tablet');
}
}
}
desktop();
function desktop(){
const mql = window.matchMedia('screen and (min-width: 992px)');
checkMedia(mql);
mql.addListener(checkMedia);
function checkMedia(mql){
if(mql.matches){
console.log('desktop');
}
}
}
如果我将媒体查询放在一个数组中并在每次刷新时使用一个循环,我的控制台中的输出与我的数组中的项目一样多
大概有什么我不明白的。
推荐阅读
- javascript - 更新 .babelrc 以将 JavaScript 文件路径添加到 Transpile
- python - 无法安装烧瓶-mongoengine
- java - 如何在 Java 中使用 Graphics2D 绘制图像的一部分
- node.js - 收到来自 Stripe 的带有授权码的响应后出现 NavigationDuplicated 错误
- jquery-select2 - 添加多个时 Select2 Ajax 中断(堆栈 Rails 模板问题,已解决)
- python - 检测自引用省略号 [...] 并用字符串替换
- ruby-on-rails - 如何以这种形式删除数组
- terraform - 连接到 EC2 实例时的 Terraform 超时
- perl - Perl - 乘十进制
- angular - 在 Angular 中修改一个类以获取基于另一个属性的新属性