如果浏览器窗口小于给定大小，如何使用 Javascript 隐藏一些 ID 元素？

Question

我已经为这个问题寻找了几个小时的答案，但找不到任何有效的方法。

如果浏览器窗口宽度小于给定大小时网页不可见，我需要制作一些元素。这是因为窗口左侧有一些固定位置的“按钮”在滚动时会展开，但是如果窗口宽度小于 1056 像素左右，这些按钮会与主页内容重叠。

我有一个用于返回窗口大小并将该值放入变量的脚本。 如果变量值小于 1056，我会显示一条消息。（用于测试）

我已经看到了如何使用 jQuery 和 Javascript 使事物可见或不可见，但它们都不适合我。

我要隐藏的图像的 id 是#go2。

这是我一直试图开始工作的脚本的一部分：

if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');

if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';

我不得不使用 {literal} 标签，因为页面使用的是 SMARTY 模板！

我对 javascript 和 jQuery 非常陌生，如果有任何帮助，我将不胜感激。

谢谢。

Answer 1

为确保用户调整窗口大小时该行为发生，您还可以绑定到resize 事件：

jQuery(window).resize(function() {
   if(jQuery(window).width() < 1056) {
      jQuery(".hide-these").hide();
   }
});

Answer 2

你可以使用 jQuery：

if(viewportwidth <1056) {
    $('.target').hide();
}

此外，您可以使用 CSS3 隐藏元素，如下所示：

@media only screen and (min-width: 1056px) {
    #go2 {
        display:none;
    }
}

Answer 3

CSS3 媒体查询可以在没有 Javascript 的情况下完成您想要的操作，但是浏览器支持非常不完整： http://www.w3.org/TR/css3-mediaqueries/

或者，您可以按照上面的建议使用 Javascript，但通常需要注意关于打开 JS 等。如果您喜欢 Javascript 库，JQuery 会更容易： http://www.ilovecolors.com.ar/detect-screen-size-css-style/

如果没有，您可以在 Google 上找到很多教程来解释如何使用 Javascript 查询窗口大小。