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的常见注意事项等等.JQuery使得它更容易，如果您喜欢Javascript库： http://www.ilovecolors.com.ar/detect-screen-size-css-style/

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

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

3 个答案: