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 */ }
我网站页面的 JavaScript:
window.onload = function() { if (window.matchMedia("(min-width: 60rem)").matches) { // My JavaScript for PC } else { // My JavaScript for mobile devices } };
如果用户在 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>
关于javascript - 如果用户调整页面大小,则更改页面的 JavaScript 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43800248/