首页 > 编程语言> > 如果用户调整页面大小,请更改页面的JavaScript代码

如果用户调整页面大小,请更改页面的JavaScript代码

2019-07-05 22:35:34 作者：互联网

1.总结

我在我的网站上为PC和移动设备使用CSS和JavaScript代码的媒体查询.如果PC用户调整我网站的页面大小,那么活动窗口的宽度将< 60rem,CSS用于页面更新,但JavaScript代码不更新→页面有错误.我没有找到,我应该怎么做,JavaScript将作为CSS媒体查询更新. 2.设置
>我的网站页面的CSS：

@media screen and (min-width: 60rem) {
    /* My CSS for PC */
    }
}

@media screen and (max-width: 60rem) {
    /* My CSS for mobile devices */
}

真实代码 – https://github.com/Kristinita/KristinitaPelican/blob/master/themes/sashapelican/static/css/general/image_right.css#L35-L56.
>我的网站页面的JavaScript：

window.onload = function() {
    if (window.matchMedia("(min-width: 60rem)").matches) {
        // My JavaScript for PC
    } else {
        // My JavaScript for mobile devices
    }

};

真实代码 – https://github.com/Kristinita/Kristinita.github.io/blob/master/theme/js/Gemini/GeminiAndJQueryLazy.js#L8-L48

如果用户在PC或移动设备上使用我的CSS和JavaScript打开页面而不调整活动窗口大小,则页面工作没有错误.

3.重现的步骤

PC用户在现代浏览器→用户调整大小页面打开我网站的任何页面(example)(例如,使用Super Left_Arrow或Super Right_Arrow热键Windows Aero Snap).现在窗口宽度< 60rem. 4.预期的行为更新页面的CSS和JavaScript. 5.实际行为 CSS更新,JavaScript不更新.如果窗口宽度< 60rem,页面打开错误. 如果窗口宽度< 60rem和用户刷新浏览器,页面打开没有错误. 6.没有帮助
>我尝试使用MatchMedia.js,
>我为媒体查询添加event listener：

// media query event handler
if (matchMedia) {
  var mq = window.matchMedia("(min-width: 500px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // window width is at least 500px
  } else {
    // window width is less than 500px
  }

}

完整代码 – https://www.pastery.net/uxkvma/.
>我无法编写任务代码：如果用户按Super Left_Arrow或Super Right_Arrow,页面重新加载.我可以编写用于重新加载页面的代码,如果用户按下Ctrl Left_Arrow或Ctrl Right_Arrow：

$(document).keydown(function(e) {
    if (e.keyCode == 37 && e.ctrlKey || e.keyCode == 39 && e.ctrlKey){
    window.location.reload();
    }
});

但是如果我将ctrlKey替换为metaKey,则代码不起作用.
>现在I use window.location.reload(),如果页面通过任何方法调整大小：

window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimeout);
  var resizeTimeout = setTimeout(function(){
    window.location.reload();
  }, 1500);
});

但这不是最好的主意,因为如果用户,例如,按Ctrl F在页面中查找文本或打开浏览器控制台,页面将重新加载.

7.不要提供

>如果用户必须为浏览器安装插件,更改设置或执行其他操作,请不要提供解决方案.解决方案必须使用任何现代浏览器的默认设置.

解决方法:

window.resize纯javascript

(function() {

window.addEventListener("resize", myFunction);

function myFunction() {
    var w = window.outerWidth;
    var h = window.outerHeight;
    var txt = "Window size: width=" + w + ", height=" + h;
    var img = document.querySelector("img");
    var p   = document.querySelector("p[id=size]");    
    
    p.style.float = "right"; // DOM CSS    
    p.innerHTML   = txt; // DOM HTML
    
    if (w > 500) { 
      img.setAttribute("src", "https://www.enfa.co.id/sites/indonesia/files/inline-images/article/si-kecil-belajar-apa-dari-permainan-cilukba_0.jpg");  
      
      // My JavaScript for PC
      anotherFunction("lightgrey");
 
    } else { 
      img.setAttribute("src", "https://pbs.twimg.com/profile_images/574971671183912961/RJ8uis5w.jpeg");
      
      // My JavaScript for mobile devices      
      anotherFunction("yellow");
 
    }    
}

function anotherFunction(color) {
    var p   = document.querySelector("p[id=size]");

    p.style.backgroundColor = color; // DOM CSS    
}

})(); //self executing function

<body> 
  <p id="size">Please click "Full page"</p>
  <p>Please resize the browser</p>
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqLQwPshtQVlcV5b9V26btY1zPlX-Egb3Tlnj9T2LNc3jNNPffhQ" />
</body>

event_onresize
innerWidth
css_selectors

标签：jquery,javascript,media-queries
来源： https://codeday.me/bug/20190705/1391563.html