在智能手机上隐藏元素或保持相同的尺寸缩放

Question

我有一个固定的标题（引导导航栏），它会随着页面的其余部分继续调整大小，这会导致标题在智能手机上占用一半的屏幕空间。

%header{class: 'navbar navbar-fixed-top navbar-inverse'}
  .container
#sorry for haml

我希望在用户放大时隐藏标题，或者只要保持相同大小，无论放大多少屏幕。

不知道这是否会改变，但我使用的是bootstrap。 我发现了一个类.hidden-xs-down，但即使页面没有放大，它也会隐藏标题，所以这不是它。

我发现的大部分内容都是关于在大屏幕上调整窗口大小以及当达到xs，md，lg阈值时发生的一些事情。我需要的是检测用户何时放大（调整大小）xs智能手机屏幕。

希望你理解我的意思。

那么，任何想法如何实现呢？

Answer 1

如果不了解标题元素的更多细节（它是h2元素吗？图片？），很难以精确的方式回答这个问题但是一般来说，这是一种技巧用于隐藏比某个宽度窄的屏幕的东西：

.my-header { display: none; }
@media(min-width: 500px) {
  .my-header { display: block; }
}