Question

我假设有一个非常简单的解决方案，但是对于javascript / jquery我还是很陌生。我正在制作一个项目，而我要做的就是使其分辨率低于1366x768时不显示。我知道使用jquery和java脚本可以获得浏览器/监视器的分辨率，但是我不知道如何使其低于1366x768时不显示。

有什么办法可以隐藏标签？

谢谢

Answer 1

您可以创建一个类并将其附加到media query内，如下所示：

@media only all and (max-width:1366px) { 
    .siteContentContainer{
        display:none;
    }

    .siteWidthNotSupported{
        display:block;
    }
}

将class siteContentContainer添加到您的身体或要隐藏的任何根元素中，然后将另一个类添加到带有适当消息以警告用户的容器中

Answer 2

使用jquery可能是$( "html" ).empty();

Answer 3

您可以这样做。首先检查显示器的宽度和尺寸，然后从提供的两种方法中进行选择。方法1在页面上添加CSS叠加层，而方法2在页面加载后删除正文内容

if ($(window).width() < 1366) && $(window).height() < 768) ) {
//Method 1
$("body").append('<div id="overlay" style="background-color:#ffffff;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');
//Method 2
$("body").empty();

}
else {
console.log('size okay');
}

或者您可以只使用CSS Media Queries，但是由于您要询问如何在JS / jQuery中进行操作，因此

Answer 4

我认为您可以做这样的事情：

if(window.screen.availWidth < 1366 && window.screen.availHeight < 768) {
  document.getElementsByTagName("body")[0].innerHTML("You cannot view the page");
}

仅在其一定分辨率以上时才显示网站？

4 个答案: