隐藏/显示取决于屏幕大小javascript

Question

我想要的是什么：

在PC / MAC上时： 所有内容都应显示出来。

在智能手机或平板电脑上时：应隐藏内容。

我知道我必须查看屏幕尺寸，但我该怎么做？

请参阅我的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
	$("#button-opl").on('click',function(){
		$("#views-exposed-form-attraktioner-block").slideToggle();
	});
});

＆＃13;

button{
  background-color:grey;
  border:none;
  padding:15px 25px;
  cursor:pointer;
  width:100%;
  color:white;
  font-size:18px;
}

#views-exposed-form-attraktioner-block{
  display:none;
  background-color:orange;
  width:100%;
  color:white;
  text-align:center;
  padding:15px 25px;
	box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-opl">
  Click here!
</button>
<div id="views-exposed-form-attraktioner-block">
Hello World
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Javascript方式

如果你想用Javascript做，你必须检查你的窗口大小并采取行动。

我选择断点为 480px 宽，这里。

我还在调整窗口大小时添加了$(window).on('resize')来更新您的页面：

var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

if (vw <= 480) {
  $('div').hide();
}

$(window).on('resize', function() {
  vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

  if (vw <= 480) {
    $('div').hide();
  }else{
    $('div').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm not visible on mobile !</div>

CSS方式

如果没有任何Javascript使用CSS Mediaqueries：

，您可以轻松完成

@media screen and (max-width: 480px){
  div{
    display: none;
  }
}

<div>I'm not visible on mobile !</div>