javascript - 根据屏幕尺寸隐藏/显示 javascript

Question

我想要什么:

在 PC/MAC 上时: 所有内容均应显示。

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

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

查看我的代码:

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

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;
}

<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>

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方式

您可以使用 CSS Mediaqueries 轻松完成此操作，无需使用任何 Javascript:

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

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