Question

有人可以帮忙吗？

我的脚本正在显示一个下拉菜单，我需要调整它的移动设备高度。我通常使用媒体查询来做这件事，但在这种情况下，我不是。

所以我需要检查，如果屏幕宽度＆gt; 768 maxH =＆＃34; 306px＆＃34;，否则maxH =＆＃34; 450px＆＃34; - 但我不确定如何写它。

function toggleNavPanel(x) {                

            var panel = document.getElementById(x),
                navarrow = document.getElementById("navarrow"), 

               //checking for screen width here and defining maxH                 

               //maxH = "306px";

                if (window.screen.availWidth > 768) {
                     maxH = "450px";
                  } else {
                    maxH = "306px";
                  }

            if (panel.style.height == maxH) {
                panel.style.height = "0px";
                panel.color = "#000000";
                //navarrow.innerHTML = "menu";
                navarrow.classList.remove('menuX');
                navarrow.classList.add('menuLines');
            } 
            else {
                panel.style.height = maxH;
                panel.color = "#ffffff";
                //navarrow.innerHTML = "close";
                navarrow.classList.remove('menuLines');
                navarrow.classList.add('menuX');                    
            }
        }

您可以在此处查看脚本 http://www.dougcowan.net.nz/article/placeholding-test-article-for-testing

Answer 1

您可以通过window.screen.availWidth和window.screen.availHeight获取屏幕尺寸。有关屏幕API的更多信息，请转到https://developer.mozilla.org/en-US/docs/Web/API/Screen。

if (window.screen.availWidth > 768) {
  // Your code here.
} else {
  // Your code here.
}

Answer 2

您可以使用window.outerWidth和window.outerHeight。

如何调整脚本以响应屏幕宽度

2 个答案: